/* ===========================================================
   KENWILD — design tokens & layout
   Concept: a personal dossier. Facets filed as index cards
   in an asymmetric bento grid, not a generic equal-card row.
   =========================================================== */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,500;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --paper: #fafaf7;
  --ink: #1a1b26;
  --ink-soft: #4d4f63;
  --sky: #bfe0f2;
  --sky-deep: #4f8cae;
  --iris: #6e62d6;
  --iris-deep: #4b3fa0;
  --line: #dedfe8;
  --mist: #f1f0fb;

  --display: "Fraunces", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "IBM Plex Mono", "SF Mono", monospace;

  --radius: 3px;
  --max-width: 1180px;
  --surface: #ffffff;
}

[data-theme="dark"] {
  --paper: #13141f;
  --ink: #f1f1f6;
  --ink-soft: #b7bcd1;
  --line: #2c2e44;
  --mist: #1f2033;
  --surface: #1a1b29;
  --iris: #8b7ff0;
  --iris-deep: #ab9ff7;
  --sky-deep: #7ab9d9;
}

[data-theme="dark"] .card-media.media-empty::after {
  background: rgba(19, 20, 31, 0.85);
}

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

html {
  overflow-x: hidden;
}
body {
  margin: 0; padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--iris-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--iris); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

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

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

/* ---------- SITE HEADER / HERO ---------- */

.site-header { padding: 64px 0 40px; }

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 76px);
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1;
}

.wordmark span {
  display: inline-block;
  background: linear-gradient(100deg, var(--ink) 50%, var(--iris));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.tagline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 18px 0 0;
}

.site-header .intro {
  margin: 20px 0 0;
  max-width: 560px;
  font-size: 17px;
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--display);
  font-weight: 300;
}

.site-header hr { margin: 40px 0 0; border: none; border-top: 1px solid var(--line); }

.authorship-header .wordmark,
.authorship-header .intro {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.theme-toggle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 20px;
  padding: 7px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--iris); color: var(--iris-deep); }

/* ---------- CINEMATIC TRANSITION ---------- */

.cinematic-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
  z-index: 9999;
}
.cinematic-overlay.active { opacity: 1; pointer-events: all; }

.cinematic-text {
  font-family: var(--display);
  color: #f4f4f8;
  font-size: clamp(20px, 4vw, 36px);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 1s ease 0.35s, transform 1s ease 0.35s;
  padding: 0 24px;
}
.cinematic-overlay.active .cinematic-text { opacity: 1; transform: scale(1); }

.cinematic-text .highlight {
  display: block;
  margin-top: 14px;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 1.2em;
  background: linear-gradient(100deg, #ff3864, #8b7ff0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- AUTHORSHIP HUB ---------- */

.fork-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 36px 0 80px;
}
.fork-card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 28px;
  min-height: 220px;
  cursor: pointer;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.fork-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(0,0,0,0.35);
}
.fork-card .tag {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; border-radius: 2px; padding: 3px 8px; margin-bottom: 16px;
}
.fork-card.nonfiction { border-color: var(--line); }
.fork-card.nonfiction:hover { border-color: var(--iris); }
.fork-card.nonfiction .tag { color: var(--iris-deep); border: 1px solid var(--iris-deep); }
.fork-card.fiction { background: #0d0d14; border-color: #2a2a38; }
.fork-card.fiction h3, .fork-card.fiction p { color: #e9e9f0; }
.fork-card.fiction .tag { color: #ff3864; border: 1px solid #ff3864; }
.fork-card.fiction:hover { border-color: #ff3864; }
.fork-card h3 { font-family: var(--display); font-size: 24px; margin: 0 0 10px; }
.fork-card p {
  font-size: 14.5px;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 700px) {
  .fork-grid { grid-template-columns: 1fr; }
}

/* ---------- NAV ---------- */

.site-nav {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.site-nav a {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 16px 20px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.site-nav a:hover, .site-nav a.active {
  color: var(--iris);
  border-bottom-color: var(--iris);
  text-decoration: none;
}

/* ---------- DOSSIER GRID ---------- */

.dossier-grid {
  display: grid;
  gap: 14px;
  margin: 32px 0 80px;
  grid-template-columns: repeat(12, 1fr);
  grid-template-areas:
    "about about about about about about about pro pro pro pro pro"
    "auth  auth  auth  auth  pub   pub   pub   pub  blog blog blog blog"
    "beyond beyond beyond beyond beyond beyond beyond beyond blog blog blog blog";
  grid-template-rows: 360px 260px 230px;
}

.card-about        { grid-area: about;  --accent: var(--iris); }
.card-professional { grid-area: pro;    --accent: var(--iris-deep); }
.card-authorship   { grid-area: auth;   --accent: var(--iris); }
.card-publicService{ grid-area: pub;    --accent: var(--sky-deep); }
.card-blog         { grid-area: blog;   --accent: var(--iris-deep); }
.card-beyond       { grid-area: beyond; --accent: var(--sky-deep); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 24px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: default;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(26,27,38,0.32);
  border-color: var(--accent);
}

/* folded-corner accent */
.card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 32px 32px 0;
  border-color: transparent var(--accent) transparent transparent;
  opacity: 0.15;
  transition: opacity 0.22s ease;
}
.card:hover::after { opacity: 0.42; }

.card .tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 3px 8px;
  margin-bottom: 14px;
  width: fit-content;
}

.card h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 10px;
  line-height: 1.2;
}

.card p.card-body {
  color: var(--ink-soft);
  font-size: 14.5px;
  margin: 0 0 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.card .cta {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--accent);
}
.card .cta::after { content: " →"; }

.card .open-hint {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--accent);
  padding-top: 12px;
}
.card .open-hint::after { content: " →"; }

/* ---------- PILLAR DETAIL PAGE ---------- */

.pillar-page { padding: 52px 0 100px; max-width: 720px; margin: 0 auto; }
.pillar-page .tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; border: 1px solid var(--iris); color: var(--iris-deep);
  border-radius: 2px; padding: 3px 9px; margin-bottom: 16px;
}
.pillar-page h1 { font-family: var(--display); font-size: clamp(30px, 5vw, 46px); margin: 0 0 26px; }
.pillar-page .pillar-media { margin-bottom: 28px; border-radius: 3px; overflow: hidden; max-height: 380px; }
.pillar-page .pillar-media img { width: 100%; height: 100%; object-fit: cover; }
.pillar-page .pillar-media.media-empty {
  height: 220px;
  background-image: repeating-linear-gradient(45deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 10px);
  background-color: var(--mist);
}
.pillar-page .pillar-body { font-size: 17px; line-height: 1.72; color: var(--ink-soft); }
.pillar-page .pillar-body p { margin: 0 0 22px; }
.pillar-page .pillar-cta {
  display: inline-block; margin-top: 8px; font-family: var(--mono); font-size: 13px;
  background: var(--iris); color: #fff; padding: 11px 20px; border-radius: 2px;
}
.pillar-page .pillar-cta:hover { background: var(--iris-deep); text-decoration: none; }

/* image strip inside card — REPLACED by atmosphere design */
.card-media { display: none; }

/* ---------- ATMOSPHERE CARD DESIGN ---------- */

.card-atmo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0.16;
  z-index: 0;
  border-radius: var(--radius);
  transition: opacity 0.5s ease, transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card:hover .card-atmo-img {
  opacity: 0.28;
  transform: scale(1.06);
}

/* diagonal gradient overlay — image visible top-left, fades to solid bottom-right */
.card.has-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    155deg,
    transparent 0%,
    transparent 25%,
    var(--surface) 72%
  );
  z-index: 1;
  pointer-events: none;
  border-radius: var(--radius);
}

[data-theme="dark"] .card.has-image::before {
  background: linear-gradient(
    155deg,
    transparent 0%,
    transparent 20%,
    var(--surface) 68%
  );
}

/* card content sits above the image and gradient */
.card-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* blog card special layout */
.card-blog { overflow-y: auto; }
.card-blog h3 { margin-bottom: 16px; }
.blog-post-list { display: flex; flex-direction: column; gap: 14px; }
.blog-post-item h4 {
  font-family: var(--display);
  font-size: 16px;
  margin: 0 0 4px;
  font-weight: 500;
}
.blog-post-item .blog-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.blog-post-item p { font-size: 13px; color: var(--ink-soft); margin: 0; }

/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {
  .dossier-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "about about"
      "pro   pro"
      "auth  pub"
      "blog  blog"
      "beyond beyond";
  }
  .card { min-height: 240px; }
}

@media (max-width: 600px) {
  .dossier-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "about" "pro" "auth" "pub" "blog" "beyond";
  }
}

/* ---------- MOBILE HEADER & NAV (≤480px phones only — desktop/tablet untouched) ---------- */

@media (max-width: 480px) {
  /* Icon-only theme toggle so it stops squeezing the wordmark onto two lines */
  .theme-toggle {
    padding: 8px 9px;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .theme-toggle .theme-label { display: none; }
  .theme-toggle .theme-icon { font-size: 15px; }

  /* Nav: tighter spacing so more items fit before scrolling kicks in,
     plus a clean (hidden) scrollbar and breathing room so the last
     item never sits flush against the screen edge mid-swipe */
  .site-nav a {
    padding: 14px 13px;
    font-size: 10.5px;
  }
  .site-nav {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-right: 16px;
  }
  .site-nav::-webkit-scrollbar { display: none; }
}

/* ---------- FOOTER ---------- */

.site-footer {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding: 36px 28px 56px;
  background: var(--mist);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.site-footer-text {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.site-footer-copyright {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 4px;
}

.site-footer .dot { opacity: 0.5; }

a.card {
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
a.card:hover { text-decoration: none; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--iris); }

/* ---------- BLOG LIST ---------- */

.page-header { padding: 52px 0 20px; }
.page-header h1 {
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 46px);
  margin: 0 0 8px;
}
.back-link {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.post-list { margin: 28px 0 80px; }

.post-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}
.post-row .blog-date {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  padding-top: 5px;
}
.post-row h2 { font-family: var(--display); font-size: 22px; margin: 0 0 8px; }
.post-row p { color: var(--ink-soft); margin: 0 0 10px; font-size: 15px; }
.read-more { font-family: var(--mono); font-size: 12px; }

.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 48px 32px;
  text-align: center;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  margin: 32px 0 80px;
}

@media (max-width: 600px) {
  .post-row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- BLOG POST PAGE ---------- */

.post-page { padding: 52px 0 100px; max-width: 680px; margin: 0 auto; }
.post-page .blog-date { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }
.post-page h1 { font-family: var(--display); font-size: clamp(28px, 5vw, 42px); margin: 10px 0 28px; }

.share-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.share-btn {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.share-btn svg { width: 14px; height: 14px; }
.share-btn:hover { border-color: var(--iris); color: var(--iris); }

/* reading progress bar */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--iris); z-index: 200; transition: width 0.12s linear;
}

.reading-time { font-weight: 400; opacity: 0.75; }

/* prev/next post nav */
.post-nav {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 44px 0 0; padding-top: 24px; border-top: 1px solid var(--line);
}
.post-nav-link {
  display: flex; flex-direction: column; gap: 4px; max-width: 46%;
  text-decoration: none; color: var(--ink);
}
.post-nav-next { text-align: right; margin-left: auto; }
.post-nav-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--iris); text-transform: uppercase; }
.post-nav-title { font-family: var(--display); font-size: 15px; line-height: 1.4; }
.post-nav-link:hover .post-nav-title { color: var(--iris); }

/* related posts */
.related-posts { margin-top: 44px; }
.related-heading { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 14px; color: var(--ink); }
.related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.related-card {
  display: block; padding: 14px; border: 1px solid var(--line); border-radius: 4px;
  text-decoration: none; color: var(--ink); transition: border-color 0.15s ease;
}
.related-card:hover { border-color: var(--iris); }
.related-card-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); margin-bottom: 6px; }
.related-card-title { font-family: var(--display); font-size: 14.5px; line-height: 1.35; }

/* back to top */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.15s ease, color 0.15s ease;
  z-index: 90;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.back-to-top:hover { border-color: var(--iris); color: var(--iris); }
.back-to-top svg { width: 18px; height: 18px; }

/* select-to-share quote popover */
.quote-share-popover {
  position: absolute; transform: translateX(-50%); display: none; gap: 6px;
  background: var(--ink); border-radius: 6px; padding: 6px; z-index: 150;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.quote-share-popover.visible { display: flex; }
.quote-share-popover button {
  font-family: var(--mono); font-size: 11px; color: var(--paper); background: transparent;
  border: none; padding: 6px 10px; border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.quote-share-popover button:hover { background: rgba(255,255,255,0.15); }

/* tag chips (shared with blog list) */
.tag-chip {
  display: inline-block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--iris-deep); border: 1px solid var(--iris);
  border-radius: 999px; padding: 3px 10px; margin: 0 6px 6px 0;
}

.tag-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.filter-chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filter-chip:hover { border-color: var(--iris); color: var(--iris); }
.filter-chip.is-active { background: var(--iris); color: #fff; border-color: var(--iris); }
.post-page .post-body { font-size: 17px; line-height: 1.72; color: var(--ink-soft); }
.post-page .post-body p { margin: 0 0 22px; }
.post-page .post-body h2 {
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
  margin: 36px 0 14px;
}
.post-page .post-body blockquote {
  margin: 26px 0;
  padding: 6px 22px;
  border-left: 3px solid var(--iris);
  font-style: italic;
  color: var(--ink-soft);
}
.post-page .post-body ul,
.post-page .post-body ol {
  margin: 0 0 22px;
  padding-left: 26px;
}
.post-page .post-body li { margin-bottom: 6px; }
.post-page .post-body a { color: var(--iris); text-decoration: underline; }
.post-page .post-body strong { color: var(--ink); }
.post-page .post-media { margin-bottom: 28px; border-radius: 3px; overflow: hidden; max-height: 360px; }
.post-page .post-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- ADMIN SHARED ---------- */

.admin-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 28px; border-bottom: 1px solid var(--line); background: #fff;
  position: sticky; top: 0; z-index: 10;
}
.wordmark-small { font-family: var(--display); font-weight: 600; font-size: 20px; }
.admin-badge {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; background: var(--mist); color: var(--iris-deep);
  border: 1px solid var(--line); border-radius: 2px; padding: 3px 8px; margin-left: 10px;
}
.logout-btn {
  font-family: var(--mono); font-size: 12px; background: none;
  border: 1px solid var(--line); border-radius: 2px; padding: 8px 14px;
  cursor: pointer; color: var(--ink-soft); transition: border-color 0.15s, color 0.15s;
}
.logout-btn:hover { border-color: var(--iris); color: var(--iris-deep); }

.admin-main { flex: 1; min-width: 0; max-width: 820px; margin: 0; padding: 32px 32px 100px; }

/* ============================================================
   ADMIN — SIDEBAR NAVIGATION SHELL
   ============================================================ */

.admin-shell { display: flex; align-items: flex-start; }

.admin-sidebar {
  width: 260px; flex-shrink: 0;
  position: sticky; top: 64px;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--paper);
  padding: 20px 14px 40px;
  animation: none; /* this is a <nav>, but it must NOT inherit the site's global nav-in entrance animation — that animation's fill-mode:both was permanently pinning transform to "none", silently overriding the mobile slide-out transform below no matter what it was set to */
}
.admin-nav-search {
  width: 100%; font-family: var(--body); font-size: 13px;
  padding: 8px 10px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.admin-nav-search:focus { border-color: var(--iris); outline: none; }

.admin-nav-group { margin-bottom: 4px; }
.admin-nav-group-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 12px 10px 4px;
}
.admin-nav-link {
  display: block; width: 100%; text-align: left;
  font-family: var(--body); font-size: 13.5px; color: var(--ink);
  background: none; border: none; border-radius: var(--radius);
  padding: 8px 10px; margin: 1px 0; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.admin-nav-link:hover { background: var(--mist); }
.admin-nav-link.is-active { background: var(--iris); color: #fff; font-weight: 500; }

.admin-sidebar-toggle {
  display: none;
  align-items: center; gap: 8px;
  width: 100%;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink); background: var(--surface);
  border: none; border-bottom: 1px solid var(--line);
  padding: 14px 20px; cursor: pointer;
  position: sticky; top: 0; z-index: 15;
}
.admin-sidebar-toggle svg { width: 16px; height: 16px; flex-shrink: 0; }
.admin-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0; background: rgba(26,27,38,0.45);
  z-index: 199; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.admin-sidebar-backdrop.open { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .admin-shell { display: block; }
  .admin-sidebar-toggle { display: flex; }
  .admin-sidebar-backdrop { display: block; }
  .admin-sidebar {
    position: fixed; top: 0; left: 0; z-index: 200;
    width: min(300px, 85vw); max-height: 100vh; height: 100vh;
    box-shadow: 20px 0 50px -20px rgba(0,0,0,0.4);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding-top: 60px;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-main { max-width: none; padding: 20px 18px 100px; }
}
.admin-main > .hint { color: var(--ink-soft); font-size: 14px; margin: -4px 0 32px; }

.admin-section {
  display: none;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 20px; margin-bottom: 20px;
}
.admin-section.active { display: block; }
.admin-section h2 {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--iris-deep); margin: 0 0 18px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
}

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.field input[type="text"],
.field input[type="url"],
.field input[type="password"],
.field input[type="date"],
.field input[type="number"],
.field select,
.field textarea {
  width: 100%; font-family: var(--body); font-size: 14px;
  padding: 9px 11px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--paper); resize: vertical;
  transition: border-color 0.15s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  background: #fff; border-color: var(--iris); outline: none;
}
.field textarea { min-height: 88px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.three-col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

.image-upload-row { display: flex; align-items: center; gap: 12px; }
.img-preview {
  width: 60px; height: 60px; object-fit: cover;
  border-radius: 2px; border: 1px solid var(--line); background: var(--mist); flex-shrink: 0;
}
.img-preview.empty { background-image: repeating-linear-gradient(45deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 9px); }

/* ── Adventure editor: wide modal, tabbed sections ── */
.modal.modal-wide { max-width: 800px; }
.by-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  border-bottom: 1px solid var(--line); margin-bottom: 20px; padding-bottom: 0;
}
.by-tab {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 9px 12px; cursor: pointer; color: var(--ink-soft);
}
.by-tab.active { color: var(--iris); border-bottom-color: var(--iris); }
.by-tab-panel { display: none; }
.by-tab-panel.active { display: block; }

/* Generic repeatable-row list, shared by galleries, quotes, people,
   playlist, equipment, and budget breakdown. */
.rep-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.rep-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--mist);
}
.rep-row > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rep-row input, .rep-row textarea {
  width: 100%; font-family: var(--body); font-size: 13.5px;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 2px; background: #fff;
}
.rep-row-remove {
  font-family: var(--mono); font-size: 13px; background: none; border: none;
  color: var(--ink-soft); cursor: pointer; padding: 4px 6px; flex-shrink: 0;
}
.rep-row-remove:hover { color: #c0392b; }
.rep-add-btn {
  font-family: var(--mono); font-size: 11.5px; background: var(--mist);
  border: 1px dashed var(--line); border-radius: 3px; padding: 8px 14px; cursor: pointer;
  color: var(--iris); width: 100%;
}
.rep-thumb { width: 46px; height: 46px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); flex-shrink: 0; }
.by-field-hint { color: var(--ink-soft); font-weight: 400; font-size: 12px; }

.save-bar { display: flex; align-items: center; margin-top: 18px; }
.save-btn, .add-btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em;
  background: var(--iris); color: #fff; border: none; border-radius: 2px;
  padding: 10px 18px; cursor: pointer; transition: background 0.15s;
}
.save-btn:hover, .add-btn:hover { background: var(--iris-deep); }
.add-btn { background: var(--sky-deep); }
.add-btn:hover { background: var(--iris-deep); }

.status-msg { font-family: var(--mono); font-size: 12px; margin-left: 14px; }
.status-msg.ok { color: #2f7d4f; }
.status-msg.err { color: #b3433f; }

.post-card {
  background: var(--paper); border: 1px solid var(--line); border-radius: 2px;
  padding: 14px 16px; margin-bottom: 12px;
}
.post-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.post-card-top strong { font-family: var(--display); font-size: 15px; }
.post-card-date { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.post-card-stats { font-family: var(--mono); font-size: 11.5px; color: var(--iris-deep); margin-top: 6px; opacity: 0.9; }

/* ---------- ADMIN: multi-block content editor (Beyond Kenwild diary) ---------- */
.block-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.block-item { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; background: var(--paper); }
.block-item-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.block-type-badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--iris-deep); background: var(--mist); border-radius: 20px; padding: 3px 10px;
}
.block-actions { display: flex; gap: 6px; }
.block-actions button {
  font-family: var(--mono); font-size: 12px; background: none; border: 1px solid var(--line);
  border-radius: 2px; width: 26px; height: 26px; cursor: pointer; color: var(--ink);
}
.block-actions button:disabled { opacity: 0.3; cursor: default; }
.block-actions button:not(:disabled):hover { background: var(--mist); }
.block-actions button.block-delete { color: #b3433f; border-color: #e3b9b7; }
.block-actions button.block-delete:hover { background: #fbeceb; }
.block-item textarea, .block-item input[type="text"], .block-item input[type="url"] {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--surface); color: var(--ink); font-family: var(--body); font-size: 13.5px;
}
.block-item textarea { min-height: 70px; }
.block-add-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.block-add-btn {
  font-family: var(--mono); font-size: 12px; background: var(--surface); color: var(--iris-deep);
  border: 1px dashed var(--iris-deep); border-radius: 20px; padding: 7px 14px; cursor: pointer;
}
.block-add-btn:hover { background: var(--mist); }

.admin-comment-item { border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; margin-bottom: 10px; }
.admin-comment-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.admin-comment-text { font-size: 14px; color: var(--ink); margin-bottom: 8px; white-space: pre-wrap; }
.edit-btn {
  font-family: var(--mono); font-size: 11px; background: none;
  border: 1px solid var(--line); border-radius: 2px; padding: 5px 10px;
  cursor: pointer; margin-right: 6px;
}
.delete-btn {
  font-family: var(--mono); font-size: 11px; color: #b3433f; background: none;
  border: 1px solid #e3b9b7; border-radius: 2px; padding: 5px 10px; cursor: pointer;
}
.delete-btn:hover { background: #fbeceb; }

.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(26,27,38,0.4); z-index: 100; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
}
.modal h3 { font-family: var(--display); font-size: 22px; margin: 0 0 20px; }
.modal-footer { display: flex; gap: 10px; margin-top: 20px; justify-content: flex-end; }
.cancel-btn {
  font-family: var(--mono); font-size: 12px; background: none; border: 1px solid var(--line);
  border-radius: 2px; padding: 9px 16px; cursor: pointer;
}

/* ---------- ADMIN LOGIN ---------- */

.login-shell {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-card {
  width: 100%; max-width: 360px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 38px 32px;
}
.login-card .wordmark-small { font-size: 26px; margin-bottom: 4px; }
.login-card .tagline { margin-bottom: 28px; }
.login-error { color: #b3433f; font-family: var(--mono); font-size: 12.5px; margin: -4px 0 14px; }
.login-submit {
  width: 100%; padding: 11px 0; margin-top: 4px;
  font-family: var(--mono); font-size: 13px; background: var(--iris);
  color: #fff; border: none; border-radius: 2px; cursor: pointer; transition: background 0.15s;
}
.login-submit:hover { background: var(--iris-deep); }

/* ==========================================================
   ANIMATIONS & INTERACTIVITY
   ========================================================== */

/* ---------- KEYFRAMES ---------- */

@keyframes kw-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes aurora-a {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(50px, 30px) scale(1.15); }
}

@keyframes aurora-b {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, 25px) scale(1.1); }
}

@keyframes aurora-c {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(20px, -30px) scale(1.08); }
}

@keyframes header-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes nav-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes card-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 98, 214, 0); }
  50%       { box-shadow: 0 0 28px 4px rgba(110, 98, 214, 0.10); }
}

/* ---------- PAGE LOAD ---------- */

.site-header {
  animation: header-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
  position: relative;
  overflow: hidden;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding: 64px 28px 40px;
}

nav {
  animation: nav-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

/* ---------- AURORA BACKGROUND ON HEADER ---------- */

.site-header::before,
.site-header::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(70px);
}

.site-header::before {
  width: 420px; height: 320px;
  background: rgba(110, 98, 214, 0.16);
  top: -60px; left: -80px;
  animation: aurora-a 11s ease-in-out infinite alternate;
}

.site-header::after {
  width: 320px; height: 260px;
  background: rgba(79, 140, 174, 0.13);
  top: -20px; right: -60px;
  animation: aurora-b 14s ease-in-out infinite alternate;
}

/* third aurora orb via a wrapper — added by JS */
.aurora-c {
  position: absolute;
  width: 260px; height: 200px;
  border-radius: 50%;
  background: rgba(191, 224, 242, 0.18);
  bottom: -40px; left: 40%;
  pointer-events: none;
  z-index: -1;
  filter: blur(60px);
  animation: aurora-c 9s ease-in-out infinite alternate;
}

[data-theme="dark"] .site-header::before { background: rgba(139, 127, 240, 0.2); }
[data-theme="dark"] .site-header::after  { background: rgba(122, 185, 217, 0.15); }
[data-theme="dark"] .aurora-c            { background: rgba(139, 127, 240, 0.12); }

/* ---------- WORDMARK SHIMMER ---------- */

.wordmark span {
  background: linear-gradient(
    90deg,
    var(--ink) 20%,
    var(--iris) 40%,
    var(--iris-deep) 50%,
    var(--iris) 60%,
    var(--ink) 80%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kw-shimmer 6s linear infinite;
}

[data-theme="dark"] .wordmark span {
  background: linear-gradient(
    90deg,
    var(--ink) 20%,
    var(--iris) 40%,
    #c4b8ff 50%,
    var(--iris) 60%,
    var(--ink) 80%
  );
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- CARD ENHANCEMENTS ---------- */

/* stronger glow hover */
.card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 22px 48px -18px rgba(110, 98, 214, 0.26),
    0 4px 12px -4px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .card:hover {
  box-shadow:
    0 22px 48px -18px rgba(139, 127, 240, 0.35),
    0 4px 16px -4px rgba(0, 0, 0, 0.4);
}

/* image zoom handled directly on .card-atmo-img above */

/* ---------- SCROLL REVEAL ---------- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---------- NAV LINK ANIMATED UNDERLINE ---------- */

.site-nav a {
  position: relative;
  border-bottom: 2px solid transparent;
  transition: color 0.2s;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--iris);
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--iris);
  border-bottom-color: transparent;
  text-decoration: none;
}

/* ---------- TAG BADGE PULSE ON HOVER ---------- */

.card .tag {
  transition: background 0.2s, color 0.2s;
}
.card:hover .tag {
  background: var(--accent);
  color: #fff;
}

/* ---------- OPEN HINT SLIDE ---------- */

.card .open-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: gap 0.2s, color 0.2s;
}
.card .open-hint::after { content: "→"; transition: transform 0.2s; display: inline-block; }
.card:hover .open-hint { gap: 8px; }
.card:hover .open-hint::after { transform: translateX(4px); }


/* ---------- THEME TRANSITION ---------- */
/* Only active during the toggle — doesn't interfere with other animations */

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition:
    background-color 0.45s ease,
    color 0.45s ease,
    border-color 0.45s ease,
    box-shadow 0.45s ease,
    opacity 0.45s ease !important;
}

/* ==========================================================
   PILLAR PAGES — IMMERSIVE DESIGN
   ========================================================== */

/* Section CSS variables set by JS per page */
:root {
  --sec-accent: var(--iris);
  --sec-a: rgba(110,98,214,0.17);
  --sec-b: rgba(79,140,174,0.13);
  --sec-c: rgba(160,130,255,0.10);
}

/* ---- Top bar ---- */
.pillar-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0 0;
  animation: nav-in 0.7s cubic-bezier(0.22,1,0.36,1) both;
}

/* ---- Hero ---- */
.pillar-hero {
  position: relative;
  overflow: hidden;
  padding: 56px 0 52px;
  border-bottom: 1px solid var(--line);
  animation: header-in 0.75s cubic-bezier(0.22,1,0.36,1) 0.05s both;
}

/* Aurora orbs */
.pillar-aurora-a,
.pillar-aurora-b,
.pillar-aurora-c {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(72px);
}
.pillar-aurora-a {
  width: 380px; height: 300px;
  background: var(--sec-a);
  top: -70px; left: -80px;
  animation: aurora-a 11s ease-in-out infinite alternate;
}
.pillar-aurora-b {
  width: 280px; height: 220px;
  background: var(--sec-b);
  bottom: -50px; right: -60px;
  animation: aurora-b 14s ease-in-out infinite alternate;
}
.pillar-aurora-c {
  width: 220px; height: 180px;
  background: var(--sec-c);
  top: 30px; right: 20%;
  animation: aurora-c 9s ease-in-out infinite alternate;
}

.pillar-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

/* Tag */
.pillar-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--sec-accent);
  border: 1px solid var(--sec-accent);
  border-radius: 2px;
  padding: 3px 10px;
  margin-bottom: 20px;
  opacity: 0.9;
}

/* Headline with gradient */
.pillar-headline {
  font-family: var(--display);
  font-size: clamp(36px, 6vw, 62px);
  line-height: 1.08;
  margin: 0 0 18px;
  background: linear-gradient(105deg, var(--ink) 50%, var(--sec-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Intro paragraph */
.pillar-intro {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0;
}

/* ---- Main content area ---- */
.pillar-main {
  padding: 52px 0 100px;
  animation: header-in 0.75s cubic-bezier(0.22,1,0.36,1) 0.18s both;
}

/* Featured image */
.pillar-hero-figure { margin: 0 0 40px; }
.pillar-featured-img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  margin: 0;
  display: block;
}
.pillar-hero-caption {
  font-family: var(--display);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-muted);
  text-align: center;
  max-width: 560px;
  margin: 12px auto 0;
}

/* Body text — real, readable paragraphs (replaces the old single-line
   italic hero intro that crammed everything into one crowded block) */
.pillar-main .pillar-body {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 auto 40px;
}
.pillar-main .pillar-body p { margin: 0 0 22px; }
.pillar-main .pillar-body p:last-child { margin-bottom: 0; }

/* Empty state */
.pillar-empty {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 28px 20px;
  text-align: center;
}

/* ==========================================================
   ABOUT — SUB-PAGE CARDS
   (any number, fully editable from /admin — "About Me", "Blueprint", etc.)
   ========================================================== */

.subpage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

.subpage-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.subpage-card:hover {
  border-color: var(--sec-accent);
  transform: translateY(-4px);
  box-shadow: 0 16px 38px -16px color-mix(in srgb, var(--sec-accent) 38%, transparent);
  text-decoration: none;
}

.subpage-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.subpage-card:hover .subpage-card-img { transform: scale(1.05); }

.subpage-card-content {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.subpage-card-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  margin: 6px 0 8px;
}

.subpage-card-excerpt {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 14px;
}

.subpage-card .open-hint {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--sec-accent);
  padding-top: 4px;
  transition: gap 0.2s;
}
.subpage-card .open-hint::after { content: "→"; transition: transform 0.2s; display: inline-block; }
.subpage-card:hover .open-hint { gap: 8px; }
.subpage-card:hover .open-hint::after { transform: translateX(4px); }

/* CTA button */
.pillar-cta-btn {
  display: inline-block;
  margin-top: 36px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--sec-accent);
  color: #fff;
  padding: 13px 24px;
  border-radius: 2px;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.pillar-cta-btn:hover { opacity: 0.85; transform: translateY(-2px); text-decoration: none; }

/* ==========================================================
   PROFESSIONAL TIMELINE
   ========================================================== */

.timeline {
  position: relative;
  padding-left: 32px;
}

/* Vertical line */
.timeline::before {
  content: '';
  position: absolute;
  left: 3px; top: 10px; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--sec-accent), transparent 90%);
  opacity: 0.35;
}

.tl-section-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sec-accent);
  margin: 40px 0 14px;
  padding-left: 2px;
}
.tl-section-label:first-child { margin-top: 0; }

.tl-item {
  position: relative;
  margin-bottom: 16px;
  display: flex;
  gap: 0;
}

/* Timeline dot */
.tl-dot {
  position: absolute;
  left: -32px; top: 22px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sec-accent);
  box-shadow: 0 0 0 3px var(--paper);
  flex-shrink: 0;
  transition: box-shadow 0.2s;
}
.tl-item:hover .tl-dot {
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--sec-accent);
}

.tl-body {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 18px 22px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.tl-item:hover .tl-body {
  border-color: var(--sec-accent);
  box-shadow: 0 8px 28px -12px color-mix(in srgb, var(--sec-accent) 40%, transparent);
  transform: translateX(4px);
}

.tl-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.tl-title {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}

.tl-period {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-top: 4px;
  flex-shrink: 0;
}

.tl-org {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--sec-accent);
  margin-bottom: 10px;
}

.tl-desc {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0;
}

/* ==========================================================
   PUBLIC SERVICE GRID
   ========================================================== */

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 18px;
}

.service-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 22px 20px 20px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

/* Top accent bar */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sec-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1);
  z-index: 2;
}
.service-card:hover { border-color: var(--sec-accent); transform: translateY(-4px); box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--sec-accent) 35%, transparent); }
.service-card:hover::before { transform: scaleX(1); }

/* Photo/video bleeding to card edges as a header banner */
.service-media {
  position: relative;
  z-index: 1;
  width: calc(100% + 40px);
  margin: -22px -20px 16px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--mist);
}
.service-media img,
.service-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.service-media iframe {
  width: 100%; height: 100%;
  border: none;
  display: block;
}
.service-card:hover .service-media img,
.service-card:hover .service-media video {
  transform: scale(1.05);
}

.service-type {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sec-accent);
  border: 1px solid var(--sec-accent);
  border-radius: 2px;
  padding: 2px 8px;
  margin-bottom: 12px;
}

.service-title {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 5px;
  color: var(--ink);
}

.service-org {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

.service-desc {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.62;
  margin: 0;
}

/* ==========================================================
   CONTACT ICON BAR (footer, all pages)
   ========================================================== */

.contact-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: var(--surface);
  transition: color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.contact-icon svg {
  width: 16px;
  height: 16px;
}

.contact-icon:hover {
  color: var(--iris);
  border-color: var(--iris);
  transform: translateY(-3px);
  box-shadow: 0 8px 18px -8px rgba(110, 98, 214, 0.4);
  text-decoration: none;
}

[data-theme="dark"] .contact-icon:hover {
  color: #c4b8ff;
  border-color: #8b7ff0;
  box-shadow: 0 8px 18px -8px rgba(139, 127, 240, 0.45);
}

/* ==========================================================
   RICH TEXT EDITOR (blog post body)
   ========================================================== */

.rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 2px 2px 0 0;
  background: var(--mist);
}

.rte-btn {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink);
  padding: 6px 9px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.rte-btn:hover {
  background: var(--iris);
  border-color: var(--iris);
  color: #fff;
}

.rte-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
  margin: 0 4px;
}

.rte-editor {
  width: 100%;
  min-height: 200px;
  max-height: 480px;
  overflow-y: auto;
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.65;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 0 0 2px 2px;
  background: var(--paper);
  transition: border-color 0.15s;
  white-space: pre-wrap;
}

.rte-editor:focus {
  background: #fff;
  border-color: var(--iris);
  outline: none;
}

.rte-editor:empty::before {
  content: "Write your post here\2026";
  color: var(--ink-soft);
}

.rte-editor p { margin: 0 0 12px; }
.rte-editor h2 { font-family: var(--display); font-size: 21px; margin: 18px 0 8px; }
.rte-editor blockquote {
  margin: 14px 0;
  padding: 4px 16px;
  border-left: 3px solid var(--iris);
  color: var(--ink-soft);
  font-style: italic;
}
.rte-editor ul, .rte-editor ol { margin: 0 0 12px; padding-left: 22px; }
.rte-editor a { color: var(--iris); text-decoration: underline; }

[data-theme="dark"] .rte-toolbar { background: var(--surface); }
[data-theme="dark"] .rte-btn { background: var(--paper); }

/* ==========================================================
   NAVIGATION DRAWER (slide-out side panel)
   ========================================================== */

/* Trigger button — replaces the old standalone theme toggle in the header */
.drawer-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.drawer-trigger:hover { border-color: var(--iris); }
.drawer-trigger:active { transform: scale(0.94); }
.drawer-trigger svg { width: 18px; height: 18px; display: block; }

/* Backdrop */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 15, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 998;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Panel */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: min(340px, 86vw);
  background: var(--paper);
  border-right: 1px solid var(--line);
  box-shadow: 16px 0 50px -20px rgba(0, 0, 0, 0.35);
  transform: translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 26px 26px 32px;
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }

.drawer-close {
  align-self: flex-end;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}
.drawer-close:hover { color: var(--iris); }

.drawer-portrait-wrap {
  display: flex;
  justify-content: center;
  margin: 2px 0 18px;
}
.drawer-portrait {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  border: 3px solid var(--iris);
  background: var(--mist);
}
.drawer-portrait.empty {
  background-image: repeating-linear-gradient(45deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent 9px);
}

.drawer-tagline {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  /* overflow-x:auto inside a flex-column/overflow-y:auto container causes
     some browsers to collapse the element's height to zero. Use a simple
     clip instead — the tagline is short enough not to need scrolling. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;          /* never let flex compress this away */
  min-height: 1.4em;       /* floor so it can never silently disappear */
  display: block;
  margin: 0 0 20px;
  padding: 0 4px 2px;
}
/* On short landscape screens (phones rotated), the drawer content is
   taller than the viewport. Shrink the portrait and tighten spacing so
   the tagline stays visible without needing to scroll. */
@media (max-height: 500px) {
  .drawer-portrait {
    width: 62px;
    height: 62px;
  }
  .drawer-portrait-wrap {
    margin: 2px 0 10px;
  }
  .drawer-tagline {
    margin: 0 0 12px;
    font-size: 10px;
  }
  .drawer-theme-row {
    margin-bottom: 14px;
  }
  .drawer-close {
    width: 28px;
    height: 28px;
    font-size: 22px;
  }
}

.drawer-theme-row {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}
/* The drawer always has room — keep the toggle's text label visible
   even on narrow phones, overriding the icon-only mobile collapse. */
.drawer-theme-row .theme-toggle {
  padding: 9px 18px !important;
  border-radius: 20px !important;
}
.drawer-theme-row .theme-toggle .theme-label { display: inline !important; }

.drawer-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drawer-nav-link {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 11px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.drawer-nav-link:hover { background: var(--mist); color: var(--iris); text-decoration: none; }
.drawer-nav-indent { padding-left: 24px; font-size: 12px; color: var(--ink-soft); }
.drawer-nav-indent-2 { padding-left: 38px; }

.drawer-divider {
  height: 1px;
  background: var(--line);
  margin: 22px 0 18px;
}

.drawer-contact-bar { justify-content: center; }

body.drawer-locked { overflow: hidden; }

/* ==========================================================
   CREDIT BUBBLE — referral chip for outside services
   (e.g. "Web Dev Services" — explicitly NOT credited as this
   site's developer, just a recommended contact)
   ========================================================== */

.credit-bubble-wrap {
  position: relative;
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

.credit-bubble {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 14px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, transform 0.15s;
}
.credit-bubble:hover {
  border-color: var(--iris);
  color: var(--iris);
  transform: translateY(-1px);
}

.credit-bubble-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--iris);
  flex-shrink: 0;
  animation: credit-pulse 2.2s ease-in-out infinite;
}

@keyframes credit-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(110, 98, 214, 0.5); }
  50% { box-shadow: 0 0 0 5px rgba(110, 98, 214, 0); }
}

.credit-popover {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  width: 270px;
  max-width: 84vw;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 46px -16px rgba(0, 0, 0, 0.35);
  padding: 18px 18px 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 5;
}
.credit-popover.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.credit-popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--surface);
}

.credit-popover-close {
  position: absolute;
  top: 8px;
  right: 10px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.credit-popover-close:hover { color: var(--iris); }

.credit-popover-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  padding-right: 16px;
}
.credit-popover-header strong {
  font-family: var(--display);
  font-size: 16px;
  color: var(--ink);
}
.credit-role-tag {
  display: inline-block;
  width: fit-content;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--iris);
  border: 1px solid var(--iris);
  border-radius: 2px;
  padding: 2px 7px;
}

.credit-blurb {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}

.credit-popover .contact-bar {
  justify-content: flex-start;
  gap: 8px;
}
.credit-popover .contact-icon {
  width: 30px;
  height: 30px;
}
.credit-popover .contact-icon svg { width: 13px; height: 13px; }

/* ==========================================================
   EMAIL LIST SIGNUP STRIP
   ========================================================== */

.email-signup {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  background: var(--mist);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 56px 28px 60px;
  margin-top: 60px;
}

.email-signup-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.email-signup-heading {
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

.email-signup-sub {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 28px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.email-signup-form {
  display: flex;
  gap: 10px;
  max-width: 420px;
  margin: 0 auto;
}

.email-signup-input {
  flex: 1;
  padding: 13px 16px;
  font-size: 14px;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
  min-width: 0;
}
.email-signup-input:focus { border-color: var(--iris); }
.email-signup-input::placeholder { color: var(--ink-soft); }

.email-signup-btn {
  padding: 13px 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  background: var(--iris);
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.email-signup-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.email-signup-btn:disabled { opacity: 0.55; cursor: default; transform: none; }

.email-signup-status {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 13px;
  min-height: 1.4em;
}
.email-signup-status.success { color: #4caf82; }
.email-signup-status.error   { color: #e05c5c; }

@media (max-width: 480px) {
  .email-signup-form { flex-direction: column; }
  .email-signup-btn { width: 100%; }
}

/* ==========================================================
   NON-FICTION BOOKS — proper cards matching L. Sailor quality
   ========================================================== */

.nf-books-section { margin-top: 52px; }

.nf-books-heading {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 24px;
  color: var(--ink);
}

.nf-book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}

.nf-book-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.nf-book-card:hover {
  transform: translateY(-4px);
  border-color: var(--iris);
  box-shadow: 0 16px 36px -18px rgba(110, 98, 214, 0.3);
  text-decoration: none;
}

/* 2:3 portrait ratio — correct for book covers, no cropping */
.nf-book-cover {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nf-book-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* contain = full cover visible, no cropping */
  object-position: center;
  display: block;
  transition: transform 0.4s;
}
.nf-book-card:hover .nf-book-cover img { transform: scale(1.04); }
.nf-book-cover.no-cover {
  background-image: repeating-linear-gradient(
    45deg,
    var(--line) 0, var(--line) 1px,
    transparent 1px, transparent 14px
  );
}
.nf-book-no-cover-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
}

.nf-book-info { padding: 14px 14px 16px; }
.nf-book-info h3 {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 5px;
  line-height: 1.25;
}
.nf-book-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}
.nf-open-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--iris);
  letter-spacing: 0.04em;
}

/* Non-fiction book detail page */
.nf-book-detail { padding: 40px 0 100px; }

.nf-book-detail-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 640px) {
  .nf-book-detail-grid {
    grid-template-columns: 1fr;
  }
  .nf-book-detail-cover { max-width: 200px; }
}

.nf-book-detail-cover {
  aspect-ratio: 2 / 3;
  border-radius: 4px;
  overflow: hidden;
  background: var(--mist);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nf-book-detail-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.nf-book-detail-cover.no-cover {
  background-image: repeating-linear-gradient(
    45deg, var(--line) 0, var(--line) 1px,
    transparent 1px, transparent 14px
  );
}
.nf-book-detail-grid.no-cover-grid { grid-template-columns: 1fr; }

.nf-book-detail-body h1 {
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 600;
  margin: 10px 0 16px;
  line-height: 1.15;
}

.nf-book-detail-facts {
  display: flex;
  gap: 24px;
  font-family: var(--mono);
  font-size: 12px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.nf-book-detail-facts div span {
  display: block;
  color: var(--ink-soft);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.nf-book-detail-facts div strong { color: var(--ink); font-weight: 500; }

.nf-book-detail-synopsis {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 560px;
}
.nf-book-detail-synopsis p { margin: 0 0 16px; }
.nf-book-detail-synopsis p:last-child { margin-bottom: 0; }

.nf-buy-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.05em;
  background: var(--iris);
  color: #fff;
  padding: 13px 24px;
  border-radius: 3px;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}
.nf-buy-btn:hover { opacity: 0.88; transform: translateY(-2px); text-decoration: none; color: #fff; }

/* ==========================================================
   SAILBOAT PAGE LOADER
   Shows while JS fetches content, fades out when ready.
   ========================================================== */

#kw-loader {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 0.7s ease;
}
#kw-loader.kw-out { opacity: 0; pointer-events: none; }

.kw-boat-wrap {
  animation: kw-rock 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 18px rgba(110, 98, 214, 0.45));
}

.kw-boat-wrap svg {
  width: 72px;
  height: 84px;
  display: block;
}

.kw-loader-dot-row {
  display: flex;
  gap: 7px;
}
.kw-loader-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--iris);
  opacity: 0.3;
  animation: kw-dot-pulse 1.4s ease-in-out infinite;
}
.kw-loader-dot:nth-child(2) { animation-delay: 0.2s; }
.kw-loader-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes kw-rock {
  0%, 100% { transform: rotate(-13deg) translateY(3px); }
  50%       { transform: rotate(13deg)  translateY(-3px); }
}
@keyframes kw-dot-pulse {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* ==========================================================
   EMAIL SIGNUP — SUCCESS POPUP
   Slides up above the signup strip. Form stays visible.
   ========================================================== */

.signup-popup {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(18px);
  background: var(--paper);
  border: 1px solid var(--iris);
  border-radius: 16px;
  padding: 22px 48px 22px 22px;
  box-shadow:
    0 28px 60px -18px rgba(110, 98, 214, 0.45),
    0 0 0 1px rgba(110, 98, 214, 0.08);
  max-width: 380px;
  width: calc(100vw - 40px);
  z-index: 5000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.signup-popup.open {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.signup-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.signup-popup-close:hover { color: var(--iris); background: var(--mist); }

.signup-popup-check {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--iris);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 12px;
  flex-shrink: 0;
}

.signup-popup-msg {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}

/* ============================================================
   MARGIN DECORATIONS — for breaking up long-form body text
   (.pillar-body, .post-body, .nf-book-detail-synopsis, etc.)
   Wrap a single paragraph you want decorated like this:

     <div class="aside-wrap">
       <p>...the paragraph...</p>
       <div class="pull-quote">A short striking line, pulled from it.</div>
     </div>

   Or for an image:
     <div class="bleed-image"><img src="..." /><div class="bleed-caption">CAPTION</div></div>

   Or a margin note:
     <div class="aside-wrap">
       <p>...the paragraph...</p>
       <div class="side-note">A short annotation.</div>
     </div>

   Apply directly inside content HTML (post/pillar/synopsis body).
   Margin elements auto-hide below 1100px so nothing breaks on
   mobile/tablet — the column just reads as plain single-column text.
   ============================================================ */

/* No wrapper needed — just drop .pull-quote / .side-note directly between
   paragraphs. They position themselves in the right margin automatically,
   roughly level with where they were inserted in the text. */
.pillar-page .pillar-body, .pillar-main .pillar-body, .post-page .post-body,
.nf-book-detail-synopsis { position: relative; }

.pull-quote {
  position: absolute;
  left: calc(100% + 56px);
  width: 260px;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--iris);
  padding-left: 20px;
}

.side-note {
  position: absolute;
  left: calc(100% + 56px);
  width: 220px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.side-note::before { content: "—"; color: var(--iris); margin-right: 6px; }

.bleed-image {
  max-width: 920px;
  margin: 8px auto 36px -120px;
  border-radius: 4px;
  overflow: hidden;
}
.bleed-image img { width: 100%; display: block; }
.bleed-caption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink-soft); opacity: 0.7; margin-top: 8px;
}

.section-divider { width: 40px; height: 1px; background: var(--iris); margin: 56px auto; }

@media (max-width: 1100px) {
  .pull-quote, .side-note { display: none; }
  .bleed-image { max-width: 100%; margin: 8px 0 36px; }
}

/* ============================================================
   REACTIONS + COMMENTS — post pages
   Note: visitor-facing UI never shows numeric counts on purpose —
   it only reflects what *this visitor* has done. Totals are only
   visible in the admin panel.
   ============================================================ */

.reaction-bar {
  display: flex; align-items: center; gap: 14px;
  margin: 36px 0 8px; padding-top: 24px; border-top: 1px solid var(--line);
}

.reaction-btn {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.reaction-btn svg { width: 19px; height: 19px; }
.reaction-btn:hover:not(:disabled) { border-color: var(--iris); color: var(--iris); }
.reaction-btn:active:not(:disabled) { transform: scale(0.92); }
.reaction-btn:disabled { cursor: default; opacity: 0.6; }

.reaction-btn.is-active {
  color: #fff; border-color: var(--iris); background: var(--iris);
}
.reaction-btn.is-active svg path { fill: rgba(255,255,255,0.18); }

@keyframes reactionPulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.reaction-btn.reaction-pulse { animation: reactionPulse 0.45s ease; }

.reaction-viewed {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: 0.04em; color: var(--ink-soft); opacity: 0.45;
}
.reaction-viewed svg { width: 15px; height: 15px; }
.reaction-viewed.is-active { opacity: 1; color: var(--iris); }

/* ---- comments ---- */

.comments-section { margin-top: 44px; }
.comments-heading {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  margin: 0 0 18px; color: var(--ink);
}

.comment-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 32px; }
.comment-form input,
.comment-form textarea {
  font-family: var(--body); font-size: 14.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 4px; padding: 10px 12px; resize: vertical;
}
.comment-form textarea { min-height: 80px; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--iris); }

.comment-submit {
  align-self: flex-start; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--iris-deep); background: transparent;
  border: 1px solid var(--iris); border-radius: 3px; padding: 9px 18px; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.comment-submit:hover:not(:disabled) { background: var(--iris); color: #fff; }
.comment-submit:disabled { opacity: 0.5; cursor: default; }

.comment-empty { font-size: 14px; color: var(--ink-soft); opacity: 0.7; }

.comment-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.comment-item:last-child { border-bottom: none; }
.comment-meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 4px; }
.comment-name { font-weight: 600; font-size: 13.5px; color: var(--ink); }
.comment-date { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); opacity: 0.7; }
.comment-text { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); white-space: pre-wrap; }

/* ============================================================
   STICKY TOP BARS — back link / hamburger (and title, where the
   two already share one row) stay visible while the rest of the
   page scrolls underneath.
   ============================================================ */

.site-header .header-row,
.page-header,
.pillar-topbar,
.topbar-sticky {
  position: sticky;
  top: 0;
  z-index: 60;
}

/* Full-width visual backdrop behind the sticky bar — the bar's actual
   content stays centered/padded like the rest of the page, but the
   background+line stretch edge-to-edge so it doesn't look like a
   floating box.
   NOTE: deliberately excludes .site-header .header-row — that one sits
   on top of the homepage/authorship hero's own gradient art, so adding
   an opaque backdrop there cuts a visible seam across it. It stays
   transparent and just blends with the hero as it scrolls. */
.page-header::before,
.pillar-topbar::before,
.topbar-sticky::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  z-index: -1;
}

/* page-header/pillar-topbar/site-header already carry their own
   top padding for the normal (non-sticky) layout — give the sticky
   bars a touch of breathing room so text doesn't touch the edge. */
.site-header .header-row { padding: 14px 0; margin-top: -14px; }
.page-header { padding: 16px 0 14px; }
.pillar-topbar { padding: 14px 0; }
.topbar-sticky { padding: 14px 0; }

/* ============================================================
   PAGE TRANSITION — handled by the sailboat overlay loader
   in drawer.js / fiction-drawer.js
   ============================================================ */

/* ---- merch multi-image thumbnail strip (admin) ---- */
.merch-thumb-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.merch-thumb {
  position: relative;
  width: 74px;
  flex-shrink: 0;
}
.merch-thumb img {
  width: 74px; height: 74px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--mist);
  display: block;
}
.merch-thumb-cover {
  position: absolute;
  top: 4px; left: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(26,27,38,0.75);
  color: #fff;
  padding: 2px 5px;
  border-radius: 2px;
}
.merch-thumb-actions {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.merch-thumb-actions button {
  font-family: var(--mono);
  font-size: 11px;
  width: 20px; height: 20px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.merch-thumb-actions button:hover:not(:disabled) { border-color: var(--iris); color: var(--iris); }
.merch-thumb-actions button:disabled { opacity: 0.35; cursor: default; }

/* ---- badge pill on the product list card ---- */
.merch-badge-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--iris-deep);
  color: #fff;
  vertical-align: middle;
  margin-left: 6px;
}

/* ---- merch settings sub-headings ---- */
.admin-section h3 {
  font-family: var(--body); font-size: 14px; font-weight: 600;
  color: var(--ink); margin: 0 0 4px;
}

/* ---- reusable rich-text field wrapper for merch settings/FAQs ---- */
.merch-rte-field { margin-bottom: 2px; }
.merch-rte-field .rte-editor { min-height: 70px; max-height: 260px; }
.merch-rte-field .rte-editor:empty::before { content: attr(data-placeholder); }
.merch-rte-field .rte-editor blockquote {
  margin: 0 0 12px 24px;
  padding: 0;
  border: none;
  font-style: inherit;
  color: inherit;
}

/* ---- FAQ manager ---- */
.faq-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 16px;
  margin-bottom: 12px;
  background: var(--mist);
}
.faq-row-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.faq-row-header input[type="text"] {
  flex: 1;
  font-family: var(--body); font-size: 14px; font-weight: 600;
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--paper);
}
.faq-remove-btn {
  flex-shrink: 0;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 2px; padding: 8px 10px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.faq-remove-btn:hover { border-color: #dc2626; color: #dc2626; }

/* ============================================================
   BLOG — TOPIC CARDS (browse by subject, admin-managed)
   ============================================================ */

.topic-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin: 28px 0 36px;
}
.topic-card {
  --accent: var(--iris-deep);
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.topic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -22px rgba(26,27,38,0.32);
  border-color: var(--accent);
}
.topic-card::after {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 28px 28px 0;
  border-color: transparent var(--accent) transparent transparent;
  opacity: 0.15;
  transition: opacity 0.22s ease;
}
.topic-card:hover::after { opacity: 0.42; }
.topic-card-emoji { font-size: 22px; margin-bottom: 10px; }
.topic-card-name {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--ink);
}
.topic-card-blurb {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 10px;
}
.topic-card-count {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.topic-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.topic-cards-reset {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: -20px 0 20px;
  display: none;
}
.topic-cards-reset.show { display: inline-block; }
.topic-cards-reset:hover { color: var(--iris-deep); }

/* ============================================================
   BLOG — HEADER ICONS (search + RSS)
   ============================================================ */

.blog-header-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.blog-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.blog-icon-btn:hover { border-color: var(--iris); color: var(--iris-deep); }
.blog-icon-btn svg { width: 16px; height: 16px; }

/* ---- search overlay ---- */
.blog-search-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26,27,38,0.5);
  backdrop-filter: blur(2px);
  z-index: 500;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.blog-search-backdrop.open { opacity: 1; pointer-events: auto; }
.blog-search-panel {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  width: min(560px, 92vw);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -20px rgba(26,27,38,0.35);
  padding: 18px;
  z-index: 501;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.blog-search-backdrop.open + .blog-search-panel,
.blog-search-panel.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.blog-search-input {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.blog-search-input:focus { border-color: var(--iris); outline: none; }
.blog-search-results { margin-top: 12px; max-height: 340px; overflow-y: auto; }
.blog-search-result {
  display: block;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.blog-search-result:last-child { border-bottom: none; }
.blog-search-result:hover { background: var(--mist); }
.blog-search-result-title { font-family: var(--display); font-weight: 600; font-size: 14.5px; }
.blog-search-result-date { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.blog-search-empty { color: var(--ink-soft); font-size: 13px; padding: 10px 8px; }

/* ============================================================
   BLOG — SHIP'S LOG framing
   ============================================================ */

.log-wave-divider {
  width: 100%;
  height: 14px;
  margin: 18px 0 26px;
  opacity: 0.5;
  color: var(--iris-deep);
}
.post-row { position: relative; }
.log-entry-no {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.log-entry-no::before { content: "⛵ Entry № "; }

/* ============================================================
   READING MODE (post.html)
   ============================================================ */

body.reading-mode { background: #f6f1e7; }
[data-theme="dark"] body.reading-mode { background: #17140f; }
body.reading-mode .post-page {
  max-width: 620px;
}
body.reading-mode .post-body {
  font-size: 18px;
  line-height: 1.9;
}
body.reading-mode .topbar-sticky,
body.reading-mode .site-footer,
body.reading-mode .share-bar,
body.reading-mode .reaction-bar,
body.reading-mode .comments-section,
body.reading-mode .post-nav,
body.reading-mode .related-posts {
  opacity: 0.35;
  transition: opacity 0.25s ease;
}
body.reading-mode .topbar-sticky:hover,
body.reading-mode .site-footer:hover,
body.reading-mode .share-bar:hover,
body.reading-mode .reaction-bar:hover,
body.reading-mode .comments-section:hover,
body.reading-mode .post-nav:hover,
body.reading-mode .related-posts:hover {
  opacity: 1;
}
.reading-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.reading-mode-toggle:hover { border-color: var(--iris); color: var(--iris-deep); }
.reading-mode-toggle svg { width: 14px; height: 14px; }
.reading-mode-toggle.is-on { border-color: var(--iris-deep); color: var(--iris-deep); }

/* ============================================================
   EX LIBRIS — closing bookplate, shown after finishing a post
   ============================================================ */

.ex-libris {
  margin: 48px auto 20px;
  max-width: 380px;
  padding: 28px 26px 24px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.ex-libris.visible { opacity: 1; transform: translateY(0); }
.ex-libris::before, .ex-libris::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  height: 1px;
  background: var(--line);
}
.ex-libris::before { top: 8px; }
.ex-libris::after { bottom: 8px; }
.ex-libris-boat { width: 30px; height: 34px; margin: 0 auto 10px; color: var(--iris-deep); opacity: 0.85; }
.ex-libris-boat svg { width: 100%; height: 100%; }
.ex-libris-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ex-libris-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 0 0 6px;
  line-height: 1.3;
}
.ex-libris-meta {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .topic-cards-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .blog-search-panel { top: 60px; }
}

/* ---- blog topic row (admin) ---- */
.topic-row-emoji { width: 54px !important; flex: 0 0 54px; text-align: center; }
.topic-row-blurb {
  width: 100%;
  font-family: var(--body); font-size: 13px;
  padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--paper);
}

/* ---- merch order log ---- */
.filter-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }

.order-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.order-summary-pill {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.03em;
  padding: 5px 10px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--mist); color: var(--ink-soft);
}

.order-status-pill {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 20px;
  color: #fff; vertical-align: middle; margin-left: 6px;
}
.order-status-pill.status-pending,   .order-summary-pill.status-pending   { background: #c2820022; color: #a86400; border-color: #c28200; }
.order-status-pill.status-confirmed, .order-summary-pill.status-confirmed { background: #2563eb22; color: #1d4ed8; border-color: #2563eb; }
.order-status-pill.status-shipped,   .order-summary-pill.status-shipped   { background: #7c3aed22; color: #6d28d9; border-color: #7c3aed; }
.order-status-pill.status-closed,    .order-summary-pill.status-closed    { background: #16a34a22; color: #15803d; border-color: #16a34a; }
.order-status-pill.status-cancelled, .order-summary-pill.status-cancelled { background: #dc262622; color: #b91c1c; border-color: #dc2626; }
.order-status-pill.status-pending, .order-status-pill.status-confirmed, .order-status-pill.status-shipped, .order-status-pill.status-closed, .order-status-pill.status-cancelled { color: #fff; }
.order-status-pill.status-pending   { background: #c28200; }
.order-status-pill.status-confirmed { background: #2563eb; }
.order-status-pill.status-shipped   { background: #7c3aed; }
.order-status-pill.status-closed    { background: #16a34a; }
.order-status-pill.status-cancelled { background: #dc2626; }

/* ============================================================
   NON-FICTION BOOK DETAIL — AUTHOR'S NOTE & EXCERPT READER
   ============================================================ */

.author-note {
  margin: 32px 0;
  padding: 22px 24px;
  border-left: 3px solid var(--iris-deep);
  background: var(--mist);
  border-radius: 0 4px 4px 0;
}
.author-note-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--iris-deep);
  margin-bottom: 10px;
}
.author-note p {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.author-note p:last-child { margin-bottom: 0; }

.excerpt-block {
  margin: 0 0 20px;
  padding-top: 0;
  border-top: none;
}
.excerpt-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky-deep);
  margin-bottom: 18px;
}
.excerpt-text {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--ink);
}
.excerpt-text p { margin: 0 0 20px; }
.excerpt-text p:first-of-type::first-letter {
  font-family: var(--display);
  font-size: 50px;
  font-style: italic;
  float: left;
  line-height: 0.8;
  padding: 6px 8px 0 0;
  color: var(--iris-deep);
}
.excerpt-text p:last-child { margin-bottom: 0; }

/* ============================================================
   NON-FICTION BOOK DETAIL — RETAILER GRID & REVIEW CAROUSEL (Batch 2)
   ============================================================ */

.retailer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  max-width: 560px;
}
.retailer-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.03em;
  padding: 10px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--surface);
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.retailer-btn:hover { border-color: var(--iris); background: var(--mist); transform: translateY(-2px); }

.nf-buy-btn.whatsapp-btn { display: inline-flex; align-items: center; gap: 8px; }

.review-carousel {
  position: relative;
  margin: 28px 0 32px;
  max-width: 560px;
  padding: 26px 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--mist);
  overflow: hidden;
}
.review-track {
  display: flex;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.review-slide { flex: 0 0 100%; text-align: center; }
.review-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 12px;
}
.review-author {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.review-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.review-arrow:hover { border-color: var(--iris); background: var(--mist); }
.review-arrow.prev { left: 8px; }
.review-arrow.next { right: 8px; }
.review-arrow svg { width: 13px; height: 13px; }
.review-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}
.review-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--line);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, transform 0.2s;
}
.review-dot.active { background: var(--iris-deep); transform: scale(1.3); }

@media (max-width: 480px) {
  .review-carousel { padding: 22px 38px; }
}

/* ---- PDF upload field status (Batch 3) ---- */
.pdf-field-status {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--iris-deep);
  margin-top: 6px;
  min-height: 14px;
}

/* ============================================================
   NON-FICTION BOOK DETAIL — PDF GATE & DISCUSSION GUIDE (Batch 3)
   ============================================================ */

.pdf-gate {
  margin: 20px 0;
  max-width: 560px;
  padding: 20px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--mist);
  text-align: center;
}
.pdf-gate-icon { font-size: 20px; display: block; margin-bottom: 8px; }
.pdf-gate-text { font-size: 14px; color: var(--ink-soft); margin: 0 0 12px; }
.pdf-gate-form { display: flex; gap: 8px; max-width: 360px; margin: 0 auto; }
.pdf-gate-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--body);
  font-size: 14px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.pdf-gate-form button {
  font-family: var(--mono);
  font-size: 12px;
  padding: 9px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--iris);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.pdf-gate-form button:disabled { opacity: 0.6; cursor: default; }
.pdf-gate-msg { font-family: var(--mono); font-size: 11px; margin: 8px 0 0; min-height: 14px; }
.pdf-gate-msg.success { color: #16a34a; }
.pdf-gate-msg.error { color: #dc2626; }

.pdf-download-btn {
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--iris);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.15s;
}
.pdf-download-btn:hover { filter: brightness(1.08); }
.pdf-download-btn:active { transform: scale(0.97); }

.mailing-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 27, 38, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: 24px;
}
.mailing-popup-overlay.visible { opacity: 1; }

.mailing-popup-card {
  position: relative;
  max-width: 420px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 38px 30px 30px;
  text-align: center;
  box-shadow: 0 30px 80px -20px rgba(110, 98, 214, 0.35), 0 0 0 1px rgba(110, 98, 214, 0.06);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.mailing-popup-overlay.visible .mailing-popup-card { transform: scale(1) translateY(0); }

.mailing-popup-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  padding: 6px;
}
.mailing-popup-close:hover { color: var(--ink); }

.mailing-popup-icon { font-size: 26px; display: block; margin-bottom: 14px; }

.mailing-popup-card h3 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 12px;
}

.mailing-popup-card p {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 22px;
}

.mailing-popup-form { display: flex; gap: 8px; margin-bottom: 12px; }
.mailing-popup-form input {
  flex: 1;
  min-width: 0;
  font-family: var(--body);
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
}
.mailing-popup-form input::placeholder { color: var(--ink-soft); }
.mailing-popup-form input:focus { outline: none; border-color: var(--iris); }
.mailing-popup-form button {
  font-family: var(--mono);
  font-size: 12px;
  padding: 10px 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--iris);
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.mailing-popup-form button:disabled { opacity: 0.6; cursor: default; }

.mailing-popup-msg { font-family: var(--mono); font-size: 11px; min-height: 14px; margin: 0 0 6px; }
.mailing-popup-msg.success { color: #16a34a; }
.mailing-popup-msg.error { color: #dc2626; }

.mailing-popup-later {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 4px;
}
.mailing-popup-later:hover { color: var(--ink); }

@media (max-width: 480px) {
  .mailing-popup-card { padding: 32px 22px 24px; }
  .mailing-popup-form { flex-direction: column; }
}

.discussion-guide-link {
  display: inline-block;
  margin: 10px 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.discussion-guide-link:hover { color: var(--iris-deep); }

/* ============================================================
   PUBLIC SERVICE — its own identity: deep green + white in light mode;
   dark mode falls back to the site's normal dark theme tokens, exactly
   like Beyond Kenwild's purple treatment.
   ============================================================ */

.theme-publicService {
  --ps-paper: #ffffff;
  --ps-surface: #ffffff;
  --ps-ink: #0d2e22;
  --ps-ink-soft: #4d7364;
  --ps-accent: #168c64;
  --ps-accent-soft: rgba(22, 140, 100, 0.09);
  --ps-accent-line: rgba(22, 140, 100, 0.35);
  --ps-line: #dcefe6;
  --ps-shadow: rgba(22, 140, 100, 0.18);
}
[data-theme="dark"] .theme-publicService {
  --ps-paper: var(--paper);
  --ps-surface: var(--surface);
  --ps-ink: var(--ink);
  --ps-ink-soft: var(--ink-soft);
  --ps-accent: var(--iris);
  --ps-accent-soft: rgba(139, 127, 240, 0.14);
  --ps-accent-line: rgba(139, 127, 240, 0.4);
  --ps-line: var(--line);
  --ps-shadow: rgba(0, 0, 0, 0.5);
}

/* ── Preview cards (the /public-service hub) ── */
.service-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.service-preview-card {
  display: flex;
  flex-direction: column;
  background: var(--ps-surface);
  border: 1px solid var(--ps-line);
  border-radius: 8px;
  overflow: hidden;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.service-preview-card:hover {
  border-color: var(--ps-accent-line);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px -16px var(--ps-shadow);
}
.service-preview-thumb { aspect-ratio: 16/9; background: var(--ps-accent-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.service-preview-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.service-preview-card:hover .service-preview-thumb img { transform: scale(1.05); }
.service-preview-body { padding: 20px 22px 22px; }
.service-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ps-accent); margin-bottom: 10px;
}
.service-type-icon { font-size: 13px; }
.service-title { font-family: var(--display); font-weight: 700; font-size: 19px; color: var(--ps-ink); margin: 0 0 4px; }
.service-org { font-family: var(--mono); font-size: 12px; color: var(--ps-ink-soft); margin-bottom: 10px; }
.service-preview-excerpt {
  font-family: var(--body); font-size: 13.5px; color: var(--ps-ink-soft); line-height: 1.6; margin: 0 0 12px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.service-preview-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.service-chip {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.02em;
  background: var(--ps-accent-soft); border: 1px solid var(--ps-accent-line); color: var(--ps-ink);
  border-radius: 16px; padding: 4px 11px;
}
.service-preview-more {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ps-accent);
}

/* ── Full entry page ── */
.service-entry-body { background: var(--ps-paper); }
.service-back-link { color: var(--ps-accent) !important; }
.theme-publicService .drawer-trigger { border-color: var(--ps-accent-line); color: var(--ps-accent); }
.theme-publicService .drawer-trigger:hover { border-color: var(--ps-accent); background: var(--ps-accent-soft); }

#js-entry-hero:not(:empty) { margin-top: 24px; margin-bottom: 8px; }
.service-entry-shell {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: stretch;
}
.service-entry-shell.no-sidebar { grid-template-columns: 1fr; }
.service-entry-page { max-width: none; margin: 30px 0 70px; padding: 0 4px; }
.service-entry-sidebar { margin-top: 30px; }
.service-sidebar-inner { position: sticky; top: 90px; }
.service-sidebar-label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: var(--ps-accent); margin-bottom: 14px;
}
.service-sidebar-item {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 0; border-bottom: 1px dashed var(--ps-line); color: inherit;
}
.service-sidebar-item:last-child { border-bottom: none; }
.service-sidebar-type { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ps-accent); }
.service-sidebar-title { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--ps-ink); }
.service-sidebar-org { font-size: 12px; color: var(--ps-ink-soft); }

@media (max-width: 1040px) {
  .service-entry-shell { grid-template-columns: 1fr; max-width: min(820px, 92vw); margin: 0 auto; }
  .service-entry-sidebar { margin-top: 10px; padding-top: 20px; border-top: 1px dashed var(--ps-line); }
  .service-sidebar-inner { position: static; }
}

/* Masthead — centered type/org/period facts + title, the same "deliberate
   homepage" feel as Beyond Kenwild rather than a left-aligned blog post. */
.service-masthead { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 6px; }
.service-facts-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-bottom: 20px; }
.service-fact-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--ps-accent-soft); border: 1px solid var(--ps-accent-line);
  color: var(--ps-ink); border-radius: 22px; padding: 9px 18px;
}
.service-fact-icon { font-size: 14px; }
.service-entry-title {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 5.5vw, 40px); line-height: 1.2;
  margin: 0; color: var(--ps-ink); text-align: center;
}

/* Hero */
.service-hero { position: relative; width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.service-hero-image { aspect-ratio: 16/9; max-height: 560px; background: var(--ps-accent-soft); }
.service-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-hero-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(6,26,19,0.4) 0%, rgba(4,18,13,0.74) 100%); }
.service-hero-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px clamp(16px, 5vw, 60px);
}
.service-hero-overlay .service-fact-pill { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); color: #fff; backdrop-filter: blur(6px); }
.service-hero-overlay .service-entry-title { color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.service-hero-video { aspect-ratio: 16/9; background: #000; }
.service-hero-video iframe, .service-hero-video video { width: 100%; height: 100%; display: block; border: none; }

.service-chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.service-chip-tag { color: var(--ps-accent); }

.service-entry-body { font-family: var(--body); font-size: 16.5px; line-height: 1.85; color: var(--ps-ink-soft); max-width: 700px; }
.service-entry-body p { margin: 0 0 20px; }
.service-entry-body p:last-child { margin-bottom: 0; }

.service-section { margin-top: 36px; max-width: 700px; }
.service-section-title { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--ps-ink); margin: 0 0 14px; }
.service-highlights-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.service-highlights-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-family: var(--body); font-size: 15px; line-height: 1.6; color: var(--ps-ink-soft);
}
.service-highlight-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ps-accent-soft); color: var(--ps-accent);
  display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px;
}

@media (max-width: 480px) {
  .service-masthead, .service-hero-overlay { padding-left: 6px; padding-right: 6px; }
}

/* ============================================================
   BEYOND KENWILD — digital diary / vlog
   Its own identity: deep purple + white in light mode. In dark
   mode it deliberately falls back to the site's normal dark
   theme tokens (--paper/--ink/--iris/etc.) instead of keeping a
   bespoke palette — that's why the dark override block below
   just re-points these variables at the shared ones.
   ============================================================ */

.theme-beyond {
  --by-paper: #ffffff;
  --by-surface: #ffffff;
  --by-ink: #2b1150;
  --by-ink-soft: #6e5599;
  --by-accent: #5b21b6;
  --by-accent-soft: rgba(91, 33, 182, 0.09);
  --by-accent-line: rgba(91, 33, 182, 0.35);
  --by-line: #e6dcf7;
  --by-shadow: rgba(91, 33, 182, 0.18);
}
[data-theme="dark"] .theme-beyond {
  --by-paper: var(--paper);
  --by-surface: var(--surface);
  --by-ink: var(--ink);
  --by-ink-soft: var(--ink-soft);
  --by-accent: var(--iris);
  --by-accent-soft: rgba(139, 127, 240, 0.14);
  --by-accent-line: rgba(139, 127, 240, 0.4);
  --by-line: var(--line);
  --by-shadow: rgba(0, 0, 0, 0.5);
}

.diary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px 22px;
  padding-top: 6px;
}
.diary-card {
  display: block;
  position: relative;
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: 6px;
  padding: 14px 14px 18px;
  color: var(--by-ink);
  box-shadow: 0 6px 16px -8px var(--by-shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.diary-card:hover {
  transform: rotate(0deg) translateY(-5px) scale(1.02);
  box-shadow: 0 18px 36px -14px var(--by-shadow);
  z-index: 2;
}
.diary-card-thumb {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid var(--by-line);
  margin-bottom: 12px;
  background: var(--by-accent-soft);
}
.diary-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diary-card-icon {
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  border-radius: 4px;
  background: var(--by-accent-soft);
  border: 1px solid var(--by-line);
  margin-bottom: 12px;
}
.diary-card-number {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--by-accent);
  border-radius: 20px;
  padding: 3px 9px;
  box-shadow: 0 3px 10px -3px var(--by-shadow);
}
.diary-card-date {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--by-accent);
  margin-bottom: 6px;
}
.diary-card-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: inherit;
}
.diary-card-teaser {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--by-ink-soft);
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.diary-card-more {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--by-accent);
}
.diary-card-body { display: flex; flex-direction: column; }

/* Latest entry gets a large, full-width featured treatment instead of
   sitting in the uniform grid — an intentional break in rhythm so the page
   doesn't read as a flat wall of identical tiles. */
.diary-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  padding: 18px;
  transform: none;
}
.diary-card-featured:hover { transform: translateY(-4px); }
.diary-card-featured .diary-card-thumb,
.diary-card-featured .diary-card-icon {
  aspect-ratio: 16/10;
  margin-bottom: 0;
}
.diary-card-featured .diary-card-body { justify-content: center; padding: 6px 6px 6px 0; }
.diary-card-featured .diary-card-title { font-size: 26px; }
.diary-card-featured .diary-card-teaser { -webkit-line-clamp: 4; font-size: 15px; }
.diary-card-featured-label {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--by-accent);
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 10px;
  width: fit-content;
}

@media (max-width: 680px) {
  .diary-card-featured { grid-template-columns: 1fr; }
  .diary-card-featured .diary-card-title { font-size: 21px; }
}

/* ============================================================
   BEYOND KENWILD — full diary / vlog entry page
   ============================================================ */

.diary-entry-body { background: var(--by-paper); position: relative; }
.diary-back-link { color: var(--by-accent) !important; }

/* A more deliberate, bespoke top bar for this section — bigger presence
   than the plain link used elsewhere on the site, so the page reads as its
   own place from the first line down, not just a themed blog post. */
.theme-beyond .pillar-topbar { position: relative; z-index: 3; }
.theme-beyond .diary-back-link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.theme-beyond .drawer-trigger { border-color: var(--by-accent-line); color: var(--by-accent); }
.theme-beyond .drawer-trigger:hover { border-color: var(--by-accent); background: var(--by-accent-soft); }

/* Soft atmospheric glow behind the masthead — echoes the rest of the site's
   pillar-hero treatment but in Beyond Kenwild's own palette, so a text-first
   entry (no photo/video hero) still feels considered rather than bare. */
.diary-entry-wrap { position: relative; overflow: visible; }
.diary-entry-wrap::before {
  content: ""; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 420px; max-width: 140vw;
  background: radial-gradient(ellipse, var(--by-accent-soft) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

#js-entry-hero:not(:empty) { margin-top: 24px; margin-bottom: 8px; }
.diary-entry-shell {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: stretch;
  /* No max-width/margin cap here on purpose — with quick-facts, galleries,
     a map, and reflection cards, there's plenty of content to fill the
     same width as the hero above it (bounded only by .wrap's own max
     width), instead of sitting in a narrow ribbon down the middle of a
     wide screen. */
}
/* When there's no "more entries" to fill the sidebar with (e.g. this is
   your only adventure so far), reserving 280px+gap for an empty column is
   exactly what makes the page look shoved left with dead space on the
   right — so collapse to one full-width column instead. */
.diary-entry-shell.no-sidebar { grid-template-columns: 1fr; }
.diary-entry-shell.no-sidebar .diary-block-text,
.diary-entry-shell.no-sidebar .diary-quote { max-width: 760px; }
.diary-entry-page {
  max-width: none;
  margin: 30px 0 70px;
  padding: 0 4px;
}
.diary-entry-sidebar { margin-top: 30px; }
.diary-sidebar-inner { position: sticky; top: 90px; }
.diary-sidebar-label {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--by-accent);
  margin-bottom: 14px;
}
.diary-sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px dashed var(--by-line);
  color: var(--by-ink);
}
.diary-sidebar-item:last-child { border-bottom: none; }
.diary-sidebar-icon { font-size: 18px; flex-shrink: 0; }
.diary-sidebar-text { display: flex; flex-direction: column; gap: 2px; }
.diary-sidebar-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  color: var(--by-ink);
}
.diary-sidebar-date { font-family: var(--mono); font-size: 10.5px; color: var(--by-accent); }

@media (max-width: 1040px) {
  /* Below this width, the reserved 240px sidebar column was often sitting
     empty (no other entries yet) while the main column got squeezed into a
     fixed 640px box — reading as "everything crammed on the left" on
     landscape phones and small tablets. Drop the sidebar to a stacked block
     below the entry, and let the content use nearly the full screen width
     instead of a fixed cap. */
  .diary-entry-shell { grid-template-columns: 1fr; max-width: min(820px, 92vw); }
  .diary-entry-sidebar { margin-top: 10px; padding-top: 20px; border-top: 1px dashed var(--by-line); }
  .diary-sidebar-inner { position: static; }
  .diary-block-text { max-width: none; }
}

/* The masthead — stamp, title, and quick-facts — is deliberately centered
   as its own unit, the way a standalone site's homepage hero would read,
   rather than left-aligned like a regular blog post. */
.diary-masthead {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 10px 0 6px;
}
.diary-masthead .diary-entry-title { text-align: center; }
.diary-entry-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--by-accent);
  background: var(--by-accent-soft);
  border: 1px solid var(--by-accent-line);
  border-radius: 20px;
  padding: 6px 16px;
  margin-bottom: 20px;
}
.diary-entry-number {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 1px solid var(--by-accent-line);
}
.diary-entry-title {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, 6vw, 44px);
  line-height: 1.2;
  margin: 0 0 28px;
  color: var(--by-ink);
}

/* ── Hero: the entry's lead photo or video, shown large and full-width
   instead of a small frame pinned to the top of the page. Title and facts
   sit centered over it, like a homepage hero rather than a caption. ── */
.diary-hero { position: relative; width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.diary-hero-image {
  aspect-ratio: 16/9;
  max-height: 620px;
  background: var(--by-accent-soft);
}
.diary-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.diary-hero-scrim {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(15,6,32,0.42) 0%, rgba(10,4,20,0.72) 100%);
}
.diary-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 40px clamp(16px, 5vw, 60px);
}
.diary-hero-overlay .diary-entry-stamp {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
  backdrop-filter: blur(6px);
}
.diary-hero-overlay .diary-entry-number { border-left-color: rgba(255,255,255,0.35); }
.diary-hero-title {
  color: #fff;
  margin: 0 0 22px;
  text-align: center;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.diary-hero-overlay .diary-facts-strip { justify-content: center; margin: 0; }
.diary-hero-overlay .diary-fact-pill {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
  backdrop-filter: blur(6px);
}
.diary-hero-header { margin-bottom: 18px; }
.diary-hero-header .diary-entry-title { margin-bottom: 0; }
.diary-hero-video { aspect-ratio: 16/9; background: #000; box-shadow: 0 20px 50px -20px var(--by-shadow); }
.diary-hero-video iframe, .diary-hero-video video { width: 100%; height: 100%; display: block; border: none; }
.diary-hero-caption {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--by-ink-soft);
  margin: 10px 2px 0;
}

@media (max-width: 640px) {
  .diary-hero-image { aspect-ratio: 4/5; max-height: 460px; }
  .diary-hero-overlay { padding: 26px 18px 20px; }
}

/* Legacy single-media frame — only reached by entries saved before the
   hero/block system existed, and only as a last-resort fallback. */
.diary-entry-media {
  width: 100%;
  max-width: 480px;
  margin: 0 auto 32px;
  padding: 12px 12px 28px;
  background: var(--by-surface);
  border: 1px solid var(--by-line);
  border-radius: 6px;
  box-shadow: 0 10px 30px -12px var(--by-shadow);
}
.diary-entry-media img, .diary-entry-media video { width: 100%; display: block; border-radius: 3px; }
.diary-entry-media iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; border-radius: 3px; }
.diary-entry-body-text, .diary-entry-body {
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--by-ink-soft);
}
.diary-entry-body p { margin: 0 0 22px; }
.diary-entry-body p:last-child { margin-bottom: 0; }

/* ── Block stack: any number of text / image / video blocks, in whatever
   order the admin built them in. Media runs the full width of the reading
   column (no small boxed-in frame); text sits in a comfortable measure. ── */
.diary-block-stack {
  display: flex;
  flex-direction: column;
  gap: 34px;
  width: 100%;
}
.diary-block-text {
  font-family: var(--body);
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--by-ink-soft);
  max-width: 640px;
}
.diary-block-text p { margin: 0 0 22px; }
.diary-block-text p:last-child { margin-bottom: 0; }
.diary-block-media {
  margin: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 32px -18px var(--by-shadow);
  background: var(--by-accent-soft);
}
.diary-block-media img { width: 100%; display: block; }
.diary-block-media-video { aspect-ratio: 16/9; background: #000; }
.diary-block-media-video iframe,
.diary-block-media-video video { width: 100%; height: 100%; display: block; border: none; }
.diary-block-caption {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--by-ink-soft);
  padding: 10px 2px 0;
}

@media (max-width: 480px) {
  .diary-block-stack { gap: 26px; }
}

/* ============================================================
   BEYOND KENWILD — Adventure page extras (Stage 2):
   quick facts, galleries, map, reflections, quotes, chips, related
   ============================================================ */

.diary-facts-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px;
  margin: 0 0 6px;
}
.diary-fact-pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--by-accent-soft); border: 1px solid var(--by-accent-line);
  color: var(--by-ink); border-radius: 24px; padding: 10px 20px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.diary-fact-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px var(--by-shadow); }
.diary-fact-icon { font-size: 15px; }

.diary-section { max-width: none; }
.diary-section-title {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: 21px; color: var(--by-ink); margin: 0 0 16px;
}

/* Photo gallery */
.diary-gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.diary-gallery-thumb {
  aspect-ratio: 1/1; border: none; padding: 0; border-radius: 6px; overflow: hidden;
  cursor: zoom-in; background: var(--by-accent-soft);
}
.diary-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s; }
.diary-gallery-thumb:hover img { transform: scale(1.06); }

/* Video gallery */
.diary-video-gallery { display: flex; flex-direction: column; gap: 20px; }

/* Audio */
.diary-audio-list { display: flex; flex-direction: column; gap: 14px; }
.diary-audio-row {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px; background: var(--by-surface); border: 1px solid var(--by-line); border-radius: 6px;
}
.diary-audio-label { font-family: var(--mono); font-size: 12.5px; color: var(--by-ink); }
.diary-audio-row audio { width: 100%; height: 34px; }

/* Map */
.diary-map-place { font-family: var(--mono); font-size: 12.5px; color: var(--by-ink-soft); margin: -8px 0 12px; }
.diary-map { width: 100%; height: 340px; border-radius: 8px; overflow: hidden; border: 1px solid var(--by-line); background: var(--by-accent-soft); z-index: 0; }

/* Reflections */
.diary-reflection-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.diary-reflection-card {
  padding: 16px 18px; background: var(--by-surface); border: 1px solid var(--by-line);
  border-left: 3px solid var(--by-accent); border-radius: 4px;
}
.diary-reflection-icon { font-size: 18px; margin-right: 6px; }
.diary-reflection-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--by-accent); }
.diary-reflection-card p { margin: 8px 0 0; font-family: var(--body); font-size: 15.5px; line-height: 1.7; color: var(--by-ink-soft); }

/* Quotes */
.diary-quote {
  max-width: 680px;
  margin: 0 0 18px; padding: 4px 0 4px 20px; border-left: 3px solid var(--by-accent-line);
  font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.5; color: var(--by-ink);
}
.diary-quote cite {
  display: block; margin-top: 6px; font-family: var(--mono); font-style: normal;
  font-size: 12px; color: var(--by-ink-soft);
}

/* Chips: equipment / people / tags / categories */
.diary-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.diary-chip {
  font-family: var(--mono); font-size: 12px; padding: 6px 12px; border-radius: 20px;
  background: var(--by-surface); border: 1px solid var(--by-line); color: var(--by-ink);
}
.diary-chip-person em { font-style: normal; color: var(--by-ink-soft); }
.diary-chip-category { background: var(--by-accent); border-color: var(--by-accent); color: #fff; }
.diary-chip-tag { color: var(--by-accent); }
.diary-tags-section .diary-chip-row + .diary-chip-row { margin-top: 8px; }

/* Playlist */
.diary-playlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.diary-playlist li {
  font-family: var(--body); font-size: 14.5px; padding: 10px 14px;
  background: var(--by-surface); border: 1px solid var(--by-line); border-radius: 4px;
}
.diary-playlist a { color: var(--by-accent); text-decoration: none; }
.diary-playlist a:hover { text-decoration: underline; }

/* Related adventures — full-width breakout row */
.diary-related-section { max-width: var(--max-width); margin: 60px auto 0; padding: 40px 0 0; border-top: 1px dashed var(--by-line); }
.diary-related-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.diary-related-card {
  display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  color: var(--by-ink);
}
.diary-related-card img, .diary-related-noimg {
  width: 100%; aspect-ratio: 4/3; border-radius: 6px; object-fit: cover;
  border: 1px solid var(--by-line); background: var(--by-accent-soft);
}
.diary-related-noimg { display: flex; align-items: center; justify-content: center; font-size: 32px; }
.diary-related-title { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 15px; }

/* Lightbox */
.lightbox-overlay {
  display: none; position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 4, 20, 0.92); align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img { max-width: 88vw; max-height: 78vh; object-fit: contain; border-radius: 4px; cursor: default; }
.lightbox-caption {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 13px; color: #fff; opacity: 0.85;
}
.lightbox-close {
  position: absolute; top: 20px; right: 24px; background: none; border: none;
  color: #fff; font-size: 22px; cursor: pointer; opacity: 0.8;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 32px;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

@media (max-width: 640px) {
  .diary-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
  .diary-map { height: 220px; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 24px; }
}

/* ============================================================
   BEYOND KENWILD — Life Dashboard (the /beyond hub page)
   ============================================================ */

.dash-wrap { display: flex; flex-direction: column; gap: 44px; }

.dash-stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--by-line);
  border: 1px solid var(--by-line); border-radius: 10px; overflow: hidden;
}
.dash-stat-cell {
  background: var(--by-surface); padding: 24px 16px; text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.dash-stat-value { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 32px; color: var(--by-accent); }
.dash-stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--by-ink-soft); }

.dash-badges-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em;
  background: var(--by-accent-soft); border: 1px solid var(--by-accent-line);
  color: var(--by-ink); border-radius: 24px; padding: 9px 16px;
}
.dash-badge-icon { font-size: 15px; }

.dash-otd-row { display: flex; flex-wrap: wrap; gap: 14px; }
.dash-otd-card {
  display: flex; flex-direction: column; gap: 4px; text-decoration: none;
  background: var(--by-accent-soft); border: 1px solid var(--by-accent-line);
  border-radius: 8px; padding: 14px 18px; min-width: 180px;
  transition: transform 0.15s;
}
.dash-otd-card:hover { transform: translateY(-2px); }
.dash-otd-years { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--by-accent); }
.dash-otd-title { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 16px; color: var(--by-ink); }

.dash-map { height: 380px; }

.dash-random-wrap { display: flex; justify-content: center; }
.dash-random-btn {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  background: var(--by-accent); color: #fff; border: none;
  border-radius: 24px; padding: 13px 26px; cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dash-random-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px var(--by-shadow); }

.dash-search-section { display: flex; flex-direction: column; gap: 14px; }
.dash-search-input {
  font-family: var(--body); font-size: 15px; padding: 13px 18px;
  border: 1px solid var(--by-line); border-radius: 24px; background: var(--by-surface); color: var(--by-ink);
  max-width: 420px;
}
.dash-search-input:focus { outline: none; border-color: var(--by-accent); }
.dash-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-chip {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.03em;
  background: var(--by-surface); border: 1px solid var(--by-line); color: var(--by-ink-soft);
  border-radius: 20px; padding: 7px 14px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dash-chip:hover { border-color: var(--by-accent-line); }
.dash-chip.active { background: var(--by-accent); border-color: var(--by-accent); color: #fff; }
.dash-chip-cat.active { background: var(--by-ink); border-color: var(--by-ink); }

.dash-records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.dash-record-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--by-surface); border: 1px solid var(--by-line); border-radius: 8px; padding: 18px 20px;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dash-record-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--by-shadow); }
.dash-record-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--by-accent); }
.dash-record-value { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 22px; color: var(--by-ink); }
.dash-record-entry { font-family: var(--body); font-size: 13px; color: var(--by-ink-soft); }

.dash-bucket-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-width: 520px; }
.dash-bucket-list li {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--body); font-size: 15px; color: var(--by-ink);
  padding: 11px 4px; border-bottom: 1px dashed var(--by-line);
}
.dash-bucket-list li:last-child { border-bottom: none; }
.dash-bucket-check { font-size: 15px; color: var(--by-accent); width: 18px; text-align: center; flex-shrink: 0; }
.dash-bucket-done { color: var(--by-ink-soft); text-decoration: line-through; }
.dash-bucket-done .dash-bucket-check { color: var(--by-ink-soft); }

@media (max-width: 640px) {
  .dash-stats-strip { grid-template-columns: repeat(2, 1fr); }
  .dash-map { height: 260px; }
}

/* ============================================================
   NON-FICTION BOOK — two-column excerpt + sticky author's note
   ============================================================ */

.book-lower-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 44px;
  align-items: stretch;
  margin-top: 8px;
  max-width: 900px;
}
.book-lower-main { min-width: 0; }
.book-lower-side { }
.book-lower-side .author-note { position: sticky; top: 90px; margin: 0; }

@media (max-width: 760px) {
  .book-lower-grid { grid-template-columns: 1fr; gap: 0; max-width: 560px; }
  .book-lower-side { position: static; margin-top: 24px; }
}