/* ============================================================
   JIDE BADMUS — Redesigned Stylesheet
   Aesthetic: Editorial / Literary Magazine
   Typography: Cormorant Garamond (display) + DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES — LIGHT MODE
   ============================================================ */
:root {

  /* --- Colors: Core Palette --- */
  --color-bg:         #faf8f4;
  --color-surface:    #ffffff;
  --color-surface-2:  #f3efe8;
  --color-border:     #e2ddd4;
  --color-text:       #1a1714;
  --color-text-2:     #5c5650;
  --color-text-3:     #9c9690;

  /* --- Colors: Accent — warm amber/gold drawn from the hero image --- */
  --color-accent:     #b8892a;
  --color-accent-dark: #96701e;
  --color-accent-2:   #d4a843;
  --color-accent-bg:  rgba(184, 137, 42, 0.08);

  /* --- Colors: Semantic --- */
  --color-heading:    #1a1714;
  --color-link:       #b8892a;
  --color-link-hover: #8c6820;
  --color-white:      #ffffff;

  /* --- Colors: Overlays & Shadows --- */
  --color-overlay-dark:        rgba(10, 8, 5, 0);
  --color-overlay-dark-light:  rgba(10, 8, 5, 0.3);
  --color-overlay-dark-mid:    rgba(10, 8, 5, 0.45);
  --color-overlay-dark-full:   rgba(10, 8, 5, 0.55);
  --color-overlay-nav:         rgba(10, 8, 5, 0.65);
  --color-overlay-dark-bottom: rgba(10, 8, 5, 0.75);
  --color-white-65:            rgba(255, 255, 255, 0.65);
  --color-white-50:            rgba(255, 255, 255, 0.5);

  /* --- Colors: Status --- */
  --color-success: #2d7a3a;
  --color-error:   #c0392b;

  /* --- Header --- */
  --header-bg:        rgba(250, 248, 244, 0.95);
  --header-border:    rgba(26, 23, 20, 0.08);
  --header-height:    72px;
  --header-blur:      12px;
  --header-z-index:   1000;

  /* --- Card --- */
  --card-bg:          #ffffff;
  --card-shadow:      0 2px 12px rgba(26, 23, 20, 0.07), 0 1px 3px rgba(26, 23, 20, 0.05);
  --card-shadow-hover: 0 12px 40px rgba(26, 23, 20, 0.14), 0 4px 12px rgba(26, 23, 20, 0.08);

  /* --- Shadows --- */
  --shadow-btn-accent:       0 6px 20px rgba(184, 137, 42, 0.35);
  --shadow-nav-drawer:       -16px 0 48px rgba(0, 0, 0, 0.18);
  --shadow-book-3d:          -8px 8px 20px rgba(0,0,0,0.25), -16px 16px 40px rgba(0,0,0,0.15);
  --shadow-book-3d-hover:    -4px 4px 12px rgba(0,0,0,0.2), -8px 8px 24px rgba(0,0,0,0.12);
  --shadow-fab:               0 4px 16px rgba(0,0,0,0.2);

  /* --- Typography: Font Families --- */
  --font-display:     'Cormorant Garamond', Georgia, serif;
  --font-body:        'DM Sans', system-ui, sans-serif;

  /* --- Typography: Font Sizes --- */
  --text-base-px:     16px;
  --text-base:        1rem;
  --text-xs:          0.62rem;
  --text-xxs:         0.65rem;
  --text-sm:          0.68rem;
  --text-sm2:         0.7rem;
  --text-sm3:         0.72rem;
  --text-sm4:         0.75rem;
  --text-sm5:         0.78rem;
  --text-sm6:         0.8rem;
  --text-sm7:         0.82rem;
  --text-sm8:         0.85rem;
  --text-sm9:         0.87rem;
  --text-sm10:        0.88rem;
  --text-sm11:        0.9rem;
  --text-sm12:        0.92rem;
  --text-sm13:        0.95rem;
  --text-sm14:        0.97rem;
  --text-md:          1.05rem;
  --text-md2:         1.1rem;
  --text-md3:         1.2rem;
  --text-md4:         1.3rem;
  --text-md5:         1.35rem;
  --text-md6:         1.4rem;
  --text-md7:         1.6rem;
  --text-md8:         1.8rem;
  --text-md9:         1.9rem;
  --text-lg:          2.5rem;
  --text-icon-xs:     0.65rem;
  --text-icon-xl:     0.95rem;
  --text-hero-scroll: 0.62rem;
  --text-quote-mark:  1.2em;

  /* --- Typography: Fluid/Clamp Sizes --- */
  --text-section-heading:    clamp(2.5rem, 5vw, 4rem);
  --text-hero-quote:         clamp(1.8rem, 4.5vw, 3.2rem);
  --text-cta-heading:        clamp(1.5rem, 3vw, 2.5rem);
  --text-page-hero-title:    clamp(3rem, 7vw, 5.5rem);
  --text-book-featured-title: clamp(2rem, 4vw, 3.2rem);
  --text-404-code:           clamp(6rem, 16vw, 10rem);
  --text-404-title:          clamp(1.6rem, 4vw, 2.6rem);

  /* --- Typography: Font Weights --- */
  --fw-light:    300;
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Typography: Line Heights --- */
  --lh-tight:   1;
  --lh-heading: 1.1;
  --lh-title:   1.15;
  --lh-snug:    1.2;
  --lh-hero:    1.35;
  --lh-compact: 1.3;
  --lh-text:    1.4;
  --lh-body:    1.5;
  --lh-relaxed: 1.6;
  --lh-base:    1.65;
  --lh-loose:   1.7;
  --lh-prose:   1.8;
  --lh-wide:    1.85;
  --lh-widest:  1.8;

  /* --- Typography: Letter Spacing --- */
  --ls-tight:    -0.04em;
  --ls-slight:   0.02em;
  --ls-base:     0.04em;
  --ls-md:       0.06em;
  --ls-nav:      0.1em;
  --ls-label:    0.12em;
  --ls-tag:      0.15em;
  --ls-upper:    0.18em;
  --ls-wide:     0.2em;
  --ls-widest:   0.3em;

  /* --- Spacing --- */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   7rem;

  /* --- Layout: Max Widths --- */
  --max-w-sm:   520px;
  --max-w-md:   700px;
  --max-w-detail: 900px;
  --max-w-xl:   1100px;
  --max-w-2xl:  1200px;
  --max-w-prose: 65ch;
  --max-w-hero:  780px;
  --max-w-about-bio-portrait: 300px;
  --max-w-logo-img: 300px;

  /* --- Layout: Grid Gaps --- */
  --gap-works:  20px;

  /* --- Border Radius --- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-base: 4px;
  --radius-lg:   6px;
  --radius-pill: 100px;
  --radius-full: 50%;
  --radius-card: 8px; /* shared card corner radius — blog-card is the reference */

  /* --- Border Widths --- */
  --border-thin: 1px;
  --border-base: 1.5px;
  --border-accent-bar: 3px;

  /* --- Component Sizes --- */
  --size-logo-height:     32px;
  --size-menu-toggle:     44px;
  --size-back-top-fixed:  44px;
  --size-scroll-line-h:   40px;
  --size-hamburger-w:     24px;
  --size-hamburger-bar-h: 2.5px;
  --size-hamburger-short: 16px;
  --size-cursor-dot:      6px;
  --size-cursor-dot-hover: 7px;
  --size-cursor-dot-press: 5px;
  --size-cursor-ring:     34px;
  --size-cursor-ring-hover: 50px;
  --size-cursor-ring-press: 28px;
  --size-footer-social-icon: 16px;

  /* --- Z-Indices --- */
  --z-overlay:     940;
  --z-nav-drawer:  950;
  --z-menu-toggle: 1100;
  --z-back-top:    500;
  --z-hero-content: 2;
  --z-portrait-shadow: 0;
  --z-portrait-img:    1;
  --z-cursor:      99999;

  /* --- Motion --- */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    600ms;
  --duration-hero-bg: 8s;
  --duration-nav:     0.4s;

  /* --- Transforms --- */
  --translate-card-hover:    translateY(-3px);
  --translate-card-hover-4:  translateY(-4px);
  --translate-btn-hover:     translateY(-2px);
  --translate-btn-hover-3:   translateY(-3px);
  --translate-fab-visible:   translateY(0);
  --translate-fab-hidden:    translateY(12px);
  --scale-hero-bg:       scale(1.05);
  --scale-hero-bg-hover: scale(1);
  --rotate-book-3d:           rotateY(-8deg) rotateX(2deg);
  --rotate-book-3d-hover:     rotateY(-2deg) rotateX(0deg);

  /* --- Misc --- */
  --hero-min-height:     600px;
  --nav-drawer-w:        min(320px, 85vw);
}

/* ============================================================
   CSS CUSTOM PROPERTIES — DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --color-bg:         #100f0d;
  --color-surface:    #1c1a17;
  --color-surface-2:  #252320;
  --color-border:     #2e2c28;
  --color-text:       #f0ece4;
  --color-text-2:     #a09a92;
  --color-text-3:     #6e6860;

  --color-accent:     #d4a843;
  --color-accent-2:   #e8c46a;
  --color-accent-bg:  rgba(212, 168, 67, 0.1);

  --color-heading:    #f0ece4;
  --color-link:       #d4a843;
  --color-link-hover: #e8c46a;

  --header-bg:        rgba(16, 15, 13, 0.96);
  --header-border:    rgba(240, 236, 228, 0.08);

  --card-bg:          #1c1a17;
  --card-shadow:      0 2px 12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
  --card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* System dark mode default */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:         #100f0d;
    --color-surface:    #1c1a17;
    --color-surface-2:  #252320;
    --color-border:     #2e2c28;
    --color-text:       #f0ece4;
    --color-text-2:     #a09a92;
    --color-text-3:     #6e6860;
    --color-accent:     #d4a843;
    --color-accent-2:   #e8c46a;
    --color-accent-bg:  rgba(212, 168, 67, 0.1);
    --color-heading:    #f0ece4;
    --color-link:       #d4a843;
    --color-link-hover: #e8c46a;
    --header-bg:        rgba(16, 15, 13, 0.96);
    --header-border:    rgba(240, 236, 228, 0.08);
    --card-bg:          #1c1a17;
    --card-shadow:      0 2px 12px rgba(0,0,0,0.3);
    --card-shadow-hover: 0 12px 40px rgba(0,0,0,0.5);
  }
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: var(--text-base-px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-loose);
  color: var(--color-text);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) var(--ease-out),
              color var(--duration-slow) var(--ease-out);
  overflow-x: hidden;
}

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

a {
  color: var(--color-link);
  transition: color var(--duration-fast) ease;
}
a:hover { color: var(--color-link-hover); }

/* Site-wide keyboard focus baseline — consistent, visible ring for links
   and buttons. Form fields (inputs/selects/textareas) are intentionally
   excluded here: they each already have their own custom focus treatment
   (a themed box-shadow ring — see .cf-input:focus, .subscribe-input:focus,
   .blog-search:focus) and adding this outline on top of those produced a
   double-border look. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

ul { list-style: none; }

::selection {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-heading);
  line-height: var(--lh-title);
  font-weight: var(--fw-semibold);
}

.section-label {
  font-family: var(--font-body);
  font-size: var(--text-sm2);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.75rem;
}

.section-heading {
  font-size: var(--text-section-heading);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: var(--lh-heading);
  margin-bottom: 1.5rem;
}

/* Reusable centered header block (label + heading + subtitle) used by
   every major section site-wide (Works, Testimonials, Books, etc.) so
   headings read consistently instead of each page inventing its own
   pattern. */
.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-lg);
}

.section-header .section-label,
.section-header .section-heading {
  margin-left: auto;
  margin-right: auto;
}

.section-subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm12);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  max-width: 540px;
  margin: 0 auto;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-sm6);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-white);
  border: var(--border-base) solid var(--color-accent);
}
.btn--primary:hover {
  background-color: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: var(--color-white);
  transform: var(--translate-btn-hover);
  box-shadow: var(--shadow-btn-accent);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: var(--border-base) solid var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: var(--translate-btn-hover);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--header-z-index);
  background-color: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border-bottom: var(--border-thin) solid var(--header-border);
  height: var(--header-height);
  transition: background-color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

.header-inner {
  max-width: var(--max-w-2xl);
  margin: 0 auto;
  padding: 0 var(--space-md);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.logo-img {
  height: var(--size-logo-height);
  width: auto;
}

/* Light mode: black logo visible, white logo hidden */
.logo-light {
  display: block;
  opacity: 1;
  transition: opacity var(--duration-base) ease;
}
.logo-dark {
  display: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

/* Dark mode via data-theme attribute */
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; opacity: 1; }

/* Dark mode via system preference (when no explicit data-theme="light") */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none; }
  :root:not([data-theme="light"]) .logo-dark  { display: block; opacity: 1; }
}

.logo-text {
  font-family: var(--font-display);
  font-size: var(--text-md4);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  letter-spacing: var(--ls-slight);
  display: none; /* shown at small sizes if logo-img fails */
}

.main-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm5);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text-2);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  position: relative;
  transition: color var(--duration-fast) ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0.75rem; right: 0.75rem;
  height: var(--border-base);
  background-color: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-base) var(--ease-out);
}

.nav-link:hover,
.nav-link.active {
  color: var(--color-text);
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

.nav-link--accent {
  color: var(--color-accent) !important;
  border: var(--border-base) solid var(--color-border);
  padding: 0.4rem 0.9rem;
}
.nav-link--accent:hover {
  background-color: var(--color-accent-bg);
  border-color: var(--color-accent);
}
.nav-link--accent::after { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* Theme toggle button */
.theme-toggle {
  /* 44×44 minimum tap target (WCAG 2.5.5) */
  min-width:  44px;
  min-height: 44px;
  width:  44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
  border-radius: var(--radius-full);
  transition: color var(--duration-fast) ease,
              background-color var(--duration-fast) ease;
  font-size: 1.1rem;
  padding: 0;
}
.theme-toggle:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.toggle-icon { display: none; }
.toggle-icon--sun { display: block; }
[data-theme="dark"] .toggle-icon--sun { display: none; }
[data-theme="dark"] .toggle-icon--moon { display: block; }

/* Mobile menu toggle */
.menu-toggle {
  display: none;
  width: var(--size-menu-toggle);
  height: var(--size-menu-toggle);
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  position: relative;   /* establishes stacking context */
  z-index: var(--z-menu-toggle);        /* above header, nav drawer, overlay */
  flex-shrink: 0;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: var(--size-hamburger-w);
  pointer-events: none;
}

.hamburger span {
  display: block;
  height: var(--size-hamburger-bar-h);
  width: var(--size-hamburger-w);
  background-color: var(--color-text);
  border-radius: var(--radius-md);
  transition: transform 0.3s var(--ease-out),
              opacity   0.2s ease,
              width     0.2s ease;
  transform-origin: center center;
}

/* Third bar slightly shorter for visual interest */
.hamburger span:nth-child(3) {
  width: var(--size-hamburger-short);
  align-self: flex-end;
}

/* Open state: three bars animate into bold ✕ */
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
  width: var(--size-hamburger-w);
}
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.menu-toggle[aria-expanded="true"] .hamburger span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
  width: var(--size-hamburger-w);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  height: 100svh;
  min-height: var(--hero-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: var(--header-height);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-overlay-dark-light) 0%,
    var(--color-overlay-dark-full) 50%,
    var(--color-overlay-dark-bottom) 100%
  );
}

.hero-content {
  position: relative;
  z-index: var(--z-hero-content);
  text-align: center;
  padding: var(--space-md);
  max-width: var(--max-w-hero);
  animation: fadeUp 1.2s var(--ease-out) both;
}

.hero-label {
  font-family: var(--font-body);
  font-size: var(--text-sm3);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin-bottom: var(--space-md);
  animation: fadeUp 1s var(--ease-out) 0.2s both;
}

.hero-quote {
  font-family: var(--font-display);
  font-size: var(--text-hero-quote);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-white);
  line-height: var(--lh-hero);
  margin-bottom: 1.25rem;
  animation: fadeUp 1s var(--ease-out) 0.35s both;
}

.quote-mark {
  font-size: var(--text-quote-mark);
  line-height: 0;
  vertical-align: -0.15em;
  color: var(--color-accent-2);
  font-style: normal;
}

.hero-cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm7);
  color: var(--color-white-65);
  letter-spacing: var(--ls-md);
  margin-bottom: 2.5rem;
  font-style: normal;
  animation: fadeUp 1s var(--ease-out) 0.5s both;
}

.hero-content .btn {
  animation: fadeUp 1s var(--ease-out) 0.65s both;
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-hero-content);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  animation: fadeIn 1s ease 1.2s both;
}

.scroll-line {
  width: var(--border-thin);
  height: var(--size-scroll-line-h);
  background: linear-gradient(to bottom, transparent, var(--color-white-50));
  animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-text {
  font-family: var(--font-body);
  font-size: var(--text-hero-scroll);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-white-50);
}

/* ============================================================
   ABOUT TEASER SECTION (index.html only — see "BIO SECTION
   (about.html)" further down for the About page's own content)
   ============================================================ */
.home-about-section {
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.home-about-inner {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 6rem;
  align-items: start;
}

.home-about-portrait {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
}

.portrait-frame {
  position: relative;
  border-radius: var(--radius-base);
  overflow: hidden;
  aspect-ratio: 3/4;
}

/* On mobile the portrait container is constrained — give the decorative
   shadow offset room so it doesn't get clipped by the viewport edge */
@media (max-width: 860px) {
  .portrait-frame {
    overflow: visible; /* allow ::before shadow to show */
  }
  .portrait-img {
    border-radius: var(--radius-base);
    object-fit: contain;  /* maintain full image display on mobile */
    background-color: var(--color-surface-2);
  }
  .about-bio-portrait {
    padding-right: 14px; /* accommodate the 10px translate offset + border */
  }
}

.portrait-frame::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: var(--border-base) solid var(--color-accent);
  border-radius: var(--radius-base);
  transform: translate(10px, 10px);
  z-index: var(--z-portrait-shadow);
  pointer-events: none;
  transition: transform var(--duration-base) ease;
}

@media (max-width: 860px) {
  .portrait-frame::before {
    transform: translate(6px, 6px); /* smaller offset so it doesn't clip */
  }
}

.home-about-portrait:hover .portrait-frame::before {
  transform: translate(6px, 6px);
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* show full circular icon — don't crop a square into 3:4 */
  object-position: center;
  display: block;
  position: relative;
  z-index: var(--z-portrait-img);
  background-color: var(--color-surface-2); /* fill the frame behind transparent areas */
}

.portrait-stat {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 1.25rem;
  background-color: var(--color-surface-2);
  border-radius: var(--radius-base);
  border: var(--border-thin) solid var(--color-border);
  transition: background-color var(--duration-base) ease;
}

.stat-number {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  line-height: var(--lh-tight);
}

.stat-label {
  font-family: var(--font-body);
  font-size: var(--text-sm3);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--color-text-2);
}

.home-about-text {
  padding-top: 0.5rem;
}

.home-about-body {
  margin-bottom: var(--space-md);
}

.home-about-body p {
  color: var(--color-text-2);
  font-size: var(--text-base);
  line-height: var(--lh-prose);
  margin-bottom: var(--space-sm);
}

.home-about-body a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  transition: border-color var(--duration-fast) ease;
}
.home-about-body a:hover { border-color: var(--color-accent); }

/* ============================================================
   WORKS GRID
   ============================================================ */
.works-section {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.works-grid {
  max-width: var(--max-w-2xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap-works);
}

.work-card {
  background-color: var(--card-bg);
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  transition: background-color var(--duration-base) ease,
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease,
              transform var(--duration-base) var(--ease-out);
  border-radius: var(--radius-card);
}

.work-card:hover {
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-accent);
  transform: var(--translate-card-hover);
}

.work-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.work-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.work-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.work-card__overlay {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-base) ease;
}

.work-card__cta {
  font-family: var(--font-body);
  font-size: var(--text-sm5);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--duration-base) ease,
              transform var(--duration-base) var(--ease-out);
}

.work-card:hover .work-card__image {
  transform: scale(1.05);
}
.work-card:hover .work-card__overlay {
  background: var(--color-overlay-dark-full);
}
.work-card:hover .work-card__cta {
  opacity: 1;
  transform: translateY(0);
}

.work-card__body {
  padding: 1.5rem;
  border-top: var(--border-thin) solid var(--color-border);
  transition: border-color var(--duration-base) ease;
}

.work-card:hover .work-card__body {
  border-color: var(--color-accent);
}

/* Small category/tag pill — shared by Work and Book cards */
.card-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-tag);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}

.work-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md5);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-snug);
  margin-bottom: 0.6rem;
  transition: color var(--duration-fast) ease;
}

.work-card:hover .work-card__title {
  color: var(--color-accent);
}

.work-card__excerpt {
  font-size: var(--text-sm9);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
  /* Clamp to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band {
  background-color: var(--color-surface-2);
  border-top: var(--border-thin) solid var(--color-border);
  border-bottom: var(--border-thin) solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  transition: background-color var(--duration-slow) ease;
}

.cta-band__inner {
  max-width: var(--max-w-detail);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.cta-band__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}

.cta-band__heading {
  font-family: var(--font-display);
  font-size: var(--text-cta-heading);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: var(--lh-heading);
  margin-bottom: 0.5rem;
}

.cta-band__sub {
  font-size: var(--text-sm12);
  color: var(--color-text-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-surface);
  border-top: var(--border-thin) solid var(--color-border);
  transition: background-color var(--duration-slow) ease;
}

.footer-inner {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-lg);
}

.footer-logo {
  font-family: var(--font-display);
  font-size: var(--text-md8);
  font-weight: var(--fw-semibold);
  font-style: italic;
  color: var(--color-heading);
  text-decoration: none;
  display: block;
  margin-bottom: 0.75rem;
}

.footer-tagline {
  font-size: var(--text-sm8);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
}

.footer-heading {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-sm);
  /* Override font-family for headings set globally */
  font-family: var(--font-body) !important;
}

.footer-nav ul li {
  margin-bottom: 0.5rem;
}

.footer-nav a {
  font-size: var(--text-sm11);
  color: var(--color-text-2);
  text-decoration: none;
  transition: color var(--duration-fast) ease;
}
.footer-nav a:hover { color: var(--color-accent); }

.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-social a {
  font-size: var(--text-sm10);
  color: var(--color-text-2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: color var(--duration-fast) ease;
}
.footer-social a:hover { color: var(--color-accent); }
.footer-social i { width: var(--size-footer-social-icon); text-align: center; font-size: var(--text-icon-xl); }

.footer-bottom {
  border-top: var(--border-thin) solid var(--color-border);
  padding: 1.25rem var(--space-md);
  max-width: var(--max-w-xl);
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.3rem;
  justify-content: space-between;
  flex-wrap: wrap;
}

.footer-bottom p {
  font-size: var(--text-sm5);
  color: var(--color-text-3);
}

/* PWA install button — hidden by default; main.js only reveals it
   when the browser can actually offer installing (or, on iOS Safari,
   to show manual "Add to Home Screen" instructions instead, since no
   real install prompt is possible there). Lives in .footer-brand,
   below the tagline. */
.footer-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 6rem;
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-size: var(--text-sm5);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  background: transparent;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out);
}

.footer-install-btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-1px);
}

.footer-install-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.footer-install-btn i { font-size: var(--text-icon-xs); }

.footer-credit {
  font-size: var(--text-sm4);
  color: var(--color-text-3);
  margin-top: 0.35rem;
}

.footer-credit a {
  color: var(--color-text-3);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}

.footer-credit a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* ============================================================
   KEYFRAME ANIMATIONS
   ============================================================ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(1); }
  50%       { opacity: 0.8; transform: scaleY(1.3); }
}

/* ============================================================
   MOBILE NAV OVERLAY (backdrop)
   ============================================================ */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-overlay-nav);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: var(--z-overlay);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}

.nav-overlay.active {
  display: block;
  opacity: 1;
}

/* ============================================================
   RESPONSIVE — TABLET & MOBILE  (≤ 860px)
   ============================================================ */
@media (max-width: 860px) {

  /* ── Hamburger button ─────────────────────────────────── */
  .menu-toggle {
    display: flex;
  }

  /* ── Theme toggle — keep the 44×44 tap target, just size the
     icon glyph a touch larger so it doesn't look undersized once
     --header-height shrinks on tablet/mobile ── */
  .theme-toggle {
    font-size: 1.2rem;
  }

  /* When nav is open, give the toggle a subtle background so the ✕ 
     is visible against both the header and the drawer edge */
  .menu-toggle[aria-expanded="true"] {
    background-color: var(--color-surface-2);
    border-radius: var(--radius-full);
  }

  /* ── Nav drawer slides in from right ──────────────────── */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--nav-drawer-w);
    height: 100dvh;          /* dynamic viewport height — avoids browser chrome issues */
    background-color: var(--color-surface);
    border-left: var(--border-thin) solid var(--color-border);
    z-index: var(--z-nav-drawer);
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--duration-nav) var(--ease-out);
    box-shadow: var(--shadow-nav-drawer);
    overflow: hidden;        /* nothing bleeds outside the drawer */
  }

  .main-nav.nav-open {
    transform: translateX(0);
  }

  /* ── Drawer header strip (echoes the site header) ─────── */
  .main-nav::before {
    content: '';
    display: block;
    height: var(--header-height);
    background-color: var(--color-surface-2);
    border-bottom: var(--border-thin) solid var(--color-border);
    flex-shrink: 0;
  }

  /* ── Nav list inside drawer ───────────────────────────── */
  .main-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.75rem 0 var(--space-md);
    overflow-y: auto;
    flex: 1;
  }

  /* ── Each nav item ────────────────────────────────────── */
  .main-nav .nav-list > li {
    margin: 0;
    border-bottom: var(--border-thin) solid var(--color-border);
  }

  .main-nav .nav-list > li:last-child {
    border-bottom: none;
    margin-top: 0.5rem;
  }

  .nav-link {
    /* Reset desktop styles */
    font-size: var(--text-base);
    font-weight: var(--fw-normal);
    letter-spacing: var(--ls-md);
    text-transform: uppercase;
    color: var(--color-text-2);
    padding: 1.1rem 1.75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: none; /* border is on the <li> now */
    transition: background-color var(--duration-fast) ease,
                color var(--duration-fast) ease;
  }

  /* Arrow chevron on each item */
  .nav-link::after {
    content: '';           /* override desktop underline */
    display: block;
    width: 6px;
    height: 6px;
    border-right: var(--border-base) solid var(--color-text-3);
    border-bottom: var(--border-base) solid var(--color-text-3);
    transform: rotate(-45deg) translateY(-1px);
    transition: border-color var(--duration-fast) ease,
                transform var(--duration-fast) ease;
    flex-shrink: 0;
    background: none;
    height: auto;
    width: auto;
    position: static;
    bottom: auto;
    left: auto;
    margin-left: auto;
  }

  .nav-link:hover,
  .nav-link.active {
    background-color: var(--color-accent-bg);
    color: var(--color-accent);
  }

  .nav-link.active {
    font-weight: var(--fw-medium);
    color: var(--color-accent);
    border-left: var(--border-accent-bar) solid var(--color-accent);
    padding-left: calc(1.75rem - 3px);
  }

  .nav-link.active::after,
  .nav-link:hover::after {
    border-color: var(--color-accent);
    transform: rotate(-45deg) translateY(-1px);
  }

  .nav-link--accent {
    color: var(--color-accent) !important;
    background-color: var(--color-accent-bg) !important;
    border: none !important;
    border-radius: var(--radius-none) !important;
    margin: 0 !important;
    padding: 1.1rem 1.75rem !important;
    border-left: var(--border-accent-bar) solid var(--color-accent) !important;
    padding-left: calc(1.75rem - 3px) !important;
  }

  .nav-link--accent::after {
    display: none !important; /* no chevron on accent */
  }

  /* ── Layout fixes ─────────────────────────────────────── */
  .home-about-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .home-about-portrait {
    position: static;
    max-width: 280px;
    margin: 0 auto;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  :root {
    --header-height: 64px;
    --space-xl: 4rem;
    --space-lg: 3rem;
  }

  .theme-toggle {
    font-size: 1.25rem;
  }

  .hero {
    margin-top: var(--header-height);
  }

  .hero-quote {
    font-size: var(--text-md7);
  }

  .works-grid {
    grid-template-columns: 1fr;
    gap: var(--gap-works); /* maintain consistent gap on all screen sizes */
  }

  .work-card {
    border-bottom: var(--border-thin) solid var(--color-border);
  }

  .cta-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .footer-bottom {
    padding: var(--space-sm) var(--space-md);
  }
}


/* ============================================================
   PAGE HERO (about.html, books.html, etc.)
   ============================================================ */
.page-hero {
  margin-top: var(--header-height);
  background-color: var(--color-surface-2);
  border-bottom: var(--border-thin) solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  text-align: center;
  transition: background-color var(--duration-slow) ease;
}

.page-hero__inner {
  max-width: var(--max-w-md);
  margin: 0 auto;
  animation: fadeUp 0.9s var(--ease-out) both;
}

.page-hero__title {
  font-size: var(--text-page-hero-title);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.05;
  margin-bottom: 0.75rem;
}

.page-hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm7);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--color-text-3);
}


/* ============================================================
   BIO SECTION (about.html)
   ============================================================ */
.about-bio-section {
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.about-bio-inner {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: var(--max-w-about-bio-portrait) 1fr;
  gap: 5rem;
  align-items: start;
}

.about-bio-portrait {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-bio-fact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1.25rem 0.75rem;
  background-color: var(--color-surface);
  text-align: center;
  transition: background-color var(--duration-base) ease;
}

.fact-number {
  font-family: var(--font-display);
  font-size: var(--text-md9);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  line-height: var(--lh-tight);
}

.fact-label {
  font-family: var(--font-body);
  font-size: var(--text-xxs);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text-3);
  line-height: var(--lh-compact);
}

.about-bio-cta {
  width: 100%;
  justify-content: center;
}

.about-bio-text {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

.about-bio-block {
  padding-bottom: 3rem;
  border-bottom: var(--border-thin) solid var(--color-border);
}

.about-bio-block:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.about-bio-block p {
  color: var(--color-text-2);
  font-size: var(--text-base);
  line-height: 1.85;
  margin-bottom: 0.9rem;
}
.about-bio-block p:last-child { margin-bottom: 0; }

.about-bio-block a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: var(--border-thin) solid transparent;
  transition: border-color var(--duration-fast) ease;
}
.about-bio-block a:hover { border-color: var(--color-accent); }

.about-bio-block .section-label {
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.about-bio-quote {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: var(--border-accent-bar) solid var(--color-accent);
  background-color: var(--color-accent-bg);
  border-radius: 0 var(--radius-base) var(--radius-base) 0;
  font-family: var(--font-display);
  font-size: var(--text-md3);
  font-style: italic;
  color: var(--color-text-2);
  line-height: var(--lh-body);
}

.inline-btn {
  margin-top: 1.25rem;
}

/* Contact actions */
.contact-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Secondary CTA bar */
.secondary-cta {
  background-color: var(--color-bg);
  border-top: var(--border-thin) solid var(--color-border);
  padding: 1.75rem var(--space-md);
  transition: background-color var(--duration-slow) ease;
}

.secondary-cta__inner {
  max-width: var(--max-w-md);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

.secondary-cta__link {
  font-family: var(--font-body);
  font-size: var(--text-sm7);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text-2);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  transition: color var(--duration-fast) ease;
}
.secondary-cta__link:hover { color: var(--color-accent); }
.secondary-cta__link i { font-size: var(--text-icon-xs); transition: transform var(--duration-fast) ease; }
.secondary-cta__link:hover i { transform: translateX(4px); }

.secondary-cta__divider {
  color: var(--color-border);
  font-size: var(--text-md3);
}


/* ============================================================
   BOOK FEATURED (books.html)
   ============================================================ */
.book-featured {
  padding: var(--space-xl) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.book-featured__inner {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 6rem;
  align-items: center;
}

.book-3d-wrap {
  position: relative;
  perspective: 800px;
}

.book-3d-img {
  width: 100%;
  max-width: var(--max-w-logo-img);
  margin: 0 auto;
  display: block;
  border-radius: var(--radius-base);
  box-shadow: var(--shadow-book-3d);
  transform: var(--rotate-book-3d);
  transition: transform var(--duration-slow) var(--ease-out),
              box-shadow var(--duration-slow) var(--ease-out);
}

.book-featured:hover .book-3d-img,
.book-3d-wrap:hover .book-3d-img {
  transform: var(--rotate-book-3d-hover);
  box-shadow: var(--shadow-book-3d-hover);
}

.book-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border: var(--border-thin) solid var(--color-accent);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm);
  display: inline-block;
}

.book-featured__title {
  font-size: var(--text-book-featured-title);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-heading);
  margin-bottom: 0.4rem;
}

.book-featured__author {
  font-family: var(--font-body);
  font-size: var(--text-sm7);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: 1.5rem;
}

.book-featured__desc {
  font-size: var(--text-base);
  color: var(--color-text-2);
  line-height: var(--lh-wide);
  margin-bottom: var(--space-md);
}

.book-featured__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}


/* ============================================================
   BOOKS GRID (books.html)
   ============================================================ */
.books-section {
  padding: var(--space-lg) var(--space-md) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.books-grid {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-md);
  margin-bottom: 3rem;
}

.book-card {
  background-color: var(--card-bg);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  position: relative; /* stacking context for the full-card link overlay */
  cursor: pointer;
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              background-color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

.book-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--translate-card-hover-4);
  border-color: var(--color-accent);
}

.book-card__cover-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  background-color: var(--color-surface-2);
}

.book-card__cover-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.book-card:hover .book-card__cover {
  transform: scale(1.04);
}

/* A book with nothing to link to isn't a click target — don't imply
   it is with a pointer cursor or the hover lift used by linked cards. */
.book-card--unavailable {
  cursor: default;
}

.book-card:hover .book-card__title {
  color: var(--color-accent);
}

.btn--sm {
  padding: 0.6rem 1.4rem;
  font-size: var(--text-sm3);
}

/* Touch/mobile: CTA always visible — no hover state on touchscreen */
@media (hover: none), (max-width: 860px) {
  .book-card__cta {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }
}

.book-card__body {
  padding: 1.5rem;
}

.book-card__title {
  font-family: var(--font-display);
  font-size: var(--text-md6);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin-top: 0.4rem;
  margin-bottom: 0.6rem;
  line-height: var(--lh-snug);
  transition: color var(--duration-fast) ease;
}

.book-card__desc {
  font-size: var(--text-sm9);
  color: var(--color-text-3);
  line-height: var(--lh-base);
  margin-bottom: var(--space-sm);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Format + price row — sits below the description behind a hairline
   divider. The CTA (Download → / View ↗) is decorative text, not its
   own link: the whole card is already one click-through via
   .book-card__card-link, so this just signals what clicking does. */
.book-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: var(--border-thin) solid var(--color-border);
}

.book-card__meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm3);
  color: var(--color-text-3);
  white-space: nowrap;
}

.book-card__meta i { font-size: var(--text-icon-xs); }

.book-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--text-sm5);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--duration-base) ease,
              transform var(--duration-base) var(--ease-out);
}

.book-card:hover .book-card__cta {
  opacity: 1;
  transform: translateX(0);
}

.book-card__cta i { font-size: var(--text-icon-xs); }


/* ============================================================
   ANTHOLOGIES SECTION (books.html)
   ============================================================ */
.anthologies-section {
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.anthologies-grid {
  max-width: var(--max-w-xl);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.anthology-item {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-right: var(--border-thin) solid var(--color-border);
  border-bottom: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface);
  transition: background-color var(--duration-base) ease,
              border-color var(--duration-base) ease;
}

.anthology-item:hover {
  background-color: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.anthology-num {
  font-family: var(--font-display);
  font-size: var(--text-md7);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  opacity: 0.4;
  line-height: var(--lh-tight);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.anthology-title {
  font-family: var(--font-display);
  font-size: var(--text-md3);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin-bottom: 0.5rem;
  line-height: var(--lh-snug);
}

.anthology-desc {
  font-size: var(--text-sm8);
  color: var(--color-text-3);
  line-height: var(--lh-relaxed);
}


/* ============================================================
   RESPONSIVE — new pages
   ============================================================ */
@media (max-width: 860px) {
  .about-bio-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .about-bio-portrait {
    position: static;
    max-width: 320px;
    margin: 0 auto;
  }

  .book-featured__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .book-featured__inner .book-3d-wrap {
    max-width: 260px;
    margin: 0 auto;
  }

  .anthologies-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .page-hero {
    padding: var(--space-md) 1.5rem;
  }

  .books-grid {
    grid-template-columns: 1fr;
  }

  .anthologies-grid {
    grid-template-columns: 1fr;
  }

  .book-featured__actions,
  .contact-actions {
    flex-direction: column;
  }

  .secondary-cta__inner {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  .secondary-cta__divider {
    display: none;
  }
}


/* ============================================================
   FIXED BACK-TO-TOP BUTTON (global)
   ============================================================ */
.back-to-top-fixed {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: var(--size-back-top-fixed);
  height: var(--size-back-top-fixed);
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: var(--color-white);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm11);
  z-index: var(--z-back-top);
  opacity: 0;
  transform: var(--translate-fab-hidden);
  transition: opacity var(--duration-base) ease,
              transform var(--duration-base) ease,
              background-color var(--duration-fast) ease;
  box-shadow: var(--shadow-fab);
  text-decoration: none;
}

.back-to-top-fixed.visible {
  opacity: 1;
  transform: var(--translate-fab-visible);
}

.back-to-top-fixed:hover {
  background-color: var(--color-link-hover);
  color: var(--color-white);           /* keep icon white against the darker hover background */
  transform: var(--translate-btn-hover-3);
}


@media (max-width: 540px) {
  .back-to-top-fixed { bottom: 1.25rem; right: 1.25rem; }
}

/* ============================================================
   TOUCH / NO-HOVER DEVICES
   Show all overlay buttons and card CTAs that are normally
   hidden behind :hover — touch screens have no hover state
   ============================================================ */
@media (hover: none) {
  /* Works grid cards */
  .work-card__overlay    { background: var(--color-overlay-dark-mid) !important; }
  .work-card__cta        { opacity: 1 !important; transform: translateY(0) !important; }

  /* Book card hover title colour — apply statically */
  .book-card .book-card__title { color: var(--color-accent); }
}


/* ============================================================
   404 PAGE
   ============================================================ */
.not-found-section {
  margin-top: var(--header-height);
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.not-found-inner {
  text-align: center;
  max-width: var(--max-w-sm);
  animation: fadeUp 0.8s var(--ease-out) both;
}

.not-found-code {
  font-family: var(--font-display);
  font-size: var(--text-404-code);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: var(--lh-tight);
  color: var(--color-border);
  margin-bottom: 0;
  letter-spacing: var(--ls-tight);
  /* Subtle accent underline */
  background: linear-gradient(135deg, var(--color-border) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.not-found-title {
  font-size: var(--text-404-title);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: var(--space-sm);
}

.not-found-msg {
  font-size: var(--text-sm14);
  color: var(--color-text-2);
  line-height: var(--lh-widest);
  margin-bottom: 2.5rem;
}

.not-found-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   BOOK COVER PLACEHOLDER (typed text fallback for missing covers)
   ============================================================ */
.book-cover-placeholder--typed {
  background-color: var(--color-surface-2);
  width: 100%;
  height: 100%;          /* fill the parent cover-wrap which owns aspect-ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-md2);
  font-weight: var(--fw-semibold);
  text-align: center;
  padding: var(--space-sm);
  border-radius: var(--radius-base);
  color: var(--color-text-2);
  font-family: var(--font-display);
  font-style: italic;
  line-height: var(--lh-compact);
  transition: background-color var(--duration-base) ease,
              color var(--duration-base) ease;
}

[data-theme="dark"] .book-cover-placeholder--typed {
  background-color: var(--color-surface-2);
  color: var(--color-text-2);
}


/* ============================================================
   MOBILE PROSE — line-height & max-width
   ============================================================ */
@media (max-width: 768px) {
  p, li, blockquote {
    line-height: var(--lh-prose);
  }
}

/* max-width only when the text column is full-width (single-column layout) */
@media (max-width: 860px) {
  .about-bio-text,
  .home-about-text,
  .book-featured__desc,
  article p {
    max-width: var(--max-w-prose);
  }
}


/* ============================================================
   NAV ACTIVE STATE — aria-current + .active indicator
   ============================================================ */
nav a.active,
nav a[aria-current="page"] {
  font-weight: var(--fw-medium);
}

/* Desktop underline — only on screens where nav is horizontal */
@media (min-width: 861px) {
  nav a.active::after,
  nav a[aria-current="page"]::after {
    transform: scaleX(1) !important;
  }
}


/* ============================================================
   BIO QUOTE ATTRIBUTION
   ============================================================ */
.about-bio-quote__attribution {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--text-sm8);
  font-style: normal;
  color: var(--color-text-3);
  font-family: var(--font-body);
  letter-spacing: var(--ls-base);
}


/* ============================================================
   ABOUT STATS BAND (above bio section)
   ============================================================ */
.about-stats-band {
  background-color: var(--color-surface-2);
  border-bottom: var(--border-thin) solid var(--color-border);
  padding: var(--space-md);
  transition: background-color var(--duration-slow) ease;
}

.about-stats-band__inner {
  max-width: var(--max-w-detail);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--border-thin);
  background-color: var(--color-border);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-base);
  overflow: hidden;
}

.about-stats-band .about-bio-fact {
  background-color: var(--color-surface);
  padding: 1.5rem var(--space-sm);
  text-align: center;
  transition: background-color var(--duration-base) ease;
}

@media (max-width: 600px) {
  .about-stats-band__inner {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   ACCESSIBILITY — visually hidden (screen-reader only)
   ============================================================ */

/* ============================================================
   CUSTOM CURSOR — literary / minimal two-layer
   Only active on pointer-fine devices (mouse/trackpad)
   cursor.js creates and animates the elements
   ============================================================ */

/* Hide browser cursor globally on pointer-fine devices */
@media (pointer: fine) {
  *,
  *::before,
  *::after {
    cursor: none !important;
  }
}

/* ── Shared base ─────────────────────────────────────────── */
.jb-cursor-dot,
.jb-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;       /* never block clicks */
  z-index: var(--z-cursor);
  border-radius: var(--radius-full);
  will-change: transform;
  transition: opacity 0.25s ease;
  /* translate(-50%,-50%) so the element is centred on the cursor point */
}

/* ── Inner dot ───────────────────────────────────────────── */
.jb-cursor-dot {
  width: var(--size-cursor-dot);
  height: var(--size-cursor-dot);
  background-color: var(--color-text);   /* ink-black in light, cream in dark */
  margin-left: -3px;                      /* centre offset */
  margin-top:  -3px;
  transition: opacity 0.25s ease,
              background-color 0.2s ease,
              width 0.2s ease,
              height 0.2s ease,
              margin 0.2s ease;
}

/* ── Outer ring ──────────────────────────────────────────── */
.jb-cursor-ring {
  width: var(--size-cursor-ring);
  height: var(--size-cursor-ring);
  border: var(--border-base) solid var(--color-text);
  opacity: 0.5;
  margin-left: -17px;
  margin-top:  -17px;
  transition: opacity 0.25s ease,
              border-color 0.25s ease,
              width 0.3s var(--ease-out),
              height 0.3s var(--ease-out),
              margin 0.3s var(--ease-out),
              background-color 0.25s ease;
  background-color: transparent;
}

/* ── Hover state — over links / buttons / cards ──────────── */
.jb-cursor-ring--hover {
  width: var(--size-cursor-ring-hover);
  height: var(--size-cursor-ring-hover);
  margin-left: -25px;
  margin-top:  -25px;
  border-color: var(--color-accent);
  opacity: 0.7;
  background-color: var(--color-accent-bg);
}

.jb-cursor-dot--hover {
  background-color: var(--color-accent);
  width: var(--size-cursor-dot-hover);
  height: var(--size-cursor-dot-hover);
  margin-left: -3.5px;
  margin-top:  -3.5px;
}

/* ── Press state ─────────────────────────────────────────── */
.jb-cursor-ring--press {
  width: var(--size-cursor-ring-press);
  height: var(--size-cursor-ring-press);
  margin-left: -14px;
  margin-top:  -14px;
  opacity: 0.9;
}

.jb-cursor-dot--press {
  width: var(--size-cursor-dot-press);
  height: var(--size-cursor-dot-press);
  margin-left: -2.5px;
  margin-top:  -2.5px;
}

/* ── Dark mode adjustments ───────────────────────────────── */
[data-theme="dark"] .jb-cursor-dot {
  background-color: var(--color-text);    /* cream/off-white */
}

[data-theme="dark"] .jb-cursor-ring {
  border-color: var(--color-text);
  opacity: 0.4;
}

[data-theme="dark"] .jb-cursor-ring--hover {
  border-color: var(--color-accent);      /* amber in dark mode */
  opacity: 0.65;
}

[data-theme="dark"] .jb-cursor-dot--hover {
  background-color: var(--color-accent);
}


/* ============================================================
   CONTACT PAGE  (contact.html)
   ============================================================ */

/* ── Body layout ─────────────────────────────────────────── */
.contact-body {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}

.contact-body__inner {
  max-width: 1060px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 5rem;
  align-items: start;
}

@media (max-width: 960px) {
  .contact-body__inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

@media (max-width: 600px) {
  .contact-body {
    padding: var(--space-lg) 1.5rem;
  }
}


/* ── Left aside ──────────────────────────────────────────── */
.contact-aside {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

@media (max-width: 960px) {
  .contact-aside {
    position: static;
  }
}

.contact-aside__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}

.contact-aside__copy {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
}


/* ── Contact detail list ─────────────────────────────────── */
.contact-details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--color-border);
}

.contact-detail {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.contact-detail__icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-radius: var(--radius-lg);
  font-size: 0.9rem;
  margin-top: 2px;
  transition: background var(--duration-base) ease, color var(--duration-base) ease;
}

.contact-detail:hover .contact-detail__icon {
  background: var(--color-accent);
  color: var(--color-white);
}

.contact-detail__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-upper);
  color: var(--color-text-3);
  margin-bottom: 3px;
}

.contact-detail__value {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--duration-fast) ease;
}

a.contact-detail__value:hover {
  color: var(--color-accent);
}


/* ── Availability badge ─────────────────────────────────── */
.contact-availability {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: color-mix(in srgb, var(--color-success) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);
  border-radius: var(--radius-lg);
  padding: 0.85rem 1.1rem;
}

.contact-availability p {
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text-2);
  line-height: 1.55;
  margin: 0;
}

.contact-availability__dot {
  width: 9px;
  height: 9px;
  min-width: 9px;
  border-radius: 50%;
  background: var(--color-success);
  margin-top: 5px;
  position: relative;
  flex-shrink: 0;
}

.contact-availability__dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--color-success);
  opacity: 0.22;
  animation: jb-pulse 2.2s ease-out infinite;
}

@keyframes jb-pulse {
  0%   { transform: scale(0.8); opacity: 0.35; }
  70%  { transform: scale(1.8); opacity: 0;    }
  100% { transform: scale(1.8); opacity: 0;    }
}


/* ── Social pills ────────────────────────────────────────── */
.contact-socials__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-upper);
  color: var(--color-text-3);
  margin-bottom: 0.75rem;
}

.contact-socials__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.contact-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.85rem;
  text-decoration: none;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.contact-social-pill:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

/* Per-platform brand colors on hover — same approach already used on
   the blog post share buttons (.post-share__btn--*). */
.contact-social-pill--twitter:hover   { background: #000;     color: #fff; border-color: #000; }
.contact-social-pill--facebook:hover  { background: #1877F2;  color: #fff; border-color: #1877F2; }
.contact-social-pill--linkedin:hover  { background: #0A66C2;  color: #fff; border-color: #0A66C2; }
.contact-social-pill--instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-color: transparent;
}
.contact-social-pill--substack:hover  { background: #FF6719;  color: #fff; border-color: #FF6719; }
.contact-social-pill--medium:hover    { background: #000;     color: #fff; border-color: #000; }


/* ── Form panel ──────────────────────────────────────────── */
.contact-form-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: min-height var(--duration-slow) ease;
}

.contact-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 2.5rem;
  box-shadow: var(--card-shadow);
}

@media (max-width: 600px) {
  .contact-form {
    padding: 1.75rem 1.25rem;
  }
}


/* ── Form components (cf- prefix = contact form) ─────────── */
.cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 560px) {
  .cf-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

.cf-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

.cf-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.45rem;
}

.cf-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  margin-bottom: 0.45rem;
  letter-spacing: 0.01em;
}

.cf-label-row .cf-label {
  margin-bottom: 0;
}

.cf-req {
  color: var(--color-accent);
  font-weight: var(--fw-normal);
}

.cf-char-count {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}

.cf-input {
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              background var(--duration-fast) ease;
  appearance: none;
  -webkit-appearance: none;
}

.cf-input::placeholder {
  color: var(--color-text-3);
  opacity: 0.8;
}

.cf-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(184, 137, 42, 0.12);
  background: var(--color-surface);
}

.cf-input.cf-input--invalid {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1);
}

/* Select wrapper */
.cf-select-wrap {
  position: relative;
}

.cf-select {
  cursor: pointer;
  padding-right: 2.5rem;
}

.cf-select-arrow {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: var(--color-text-3);
  pointer-events: none;
  transition: color var(--duration-fast) ease;
}

.cf-select-wrap:focus-within .cf-select-arrow {
  color: var(--color-accent);
}

/* Textarea */
.cf-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: var(--lh-relaxed);
}

/* Inline error */
.cf-error {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: 0.35rem;
  min-height: 1em;
  display: block;
}

/* Honeypot */
.cf-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}

/* Submit button */
.cf-submit {
  width: 100%;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.9rem 1.5rem;
  font-size: var(--text-sm13);
  margin-top: 0.5rem;
}

.cf-submit__icon {
  font-size: 0.85em;
  transition: transform var(--duration-fast) ease;
}

.cf-submit:hover .cf-submit__icon {
  transform: translateX(3px) rotate(-12deg);
}

.cf-submit.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.cf-submit.is-loading .cf-submit__text::after {
  content: '…';
}

/* Privacy note */
.cf-privacy {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-3);
  text-align: center;
  margin-top: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.cf-privacy i {
  color: var(--color-accent);
  font-size: 0.75rem;
}


/* ── Success state ───────────────────────────────────────── */
.cf-success {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 3rem 2.5rem;
  box-shadow: var(--card-shadow);
  text-align: center;
  animation: cf-rise 0.45s var(--ease-out) both;
}

.cf-success[hidden] { display: none; }

@keyframes cf-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cf-success__check {
  font-size: 3rem;
  color: var(--color-success);
  margin-bottom: 1rem;
  animation: cf-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cf-pop {
  from { transform: scale(0.4); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.cf-success__heading {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 0.6rem;
}

.cf-success__body {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-2);
  margin-bottom: 1.75rem;
  line-height: var(--lh-relaxed);
}


/* ── Error banner ────────────────────────────────────────── */
.cf-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  background: rgba(192, 57, 43, 0.07);
  border: 1px solid rgba(192, 57, 43, 0.2);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-top: 1rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-error);
  line-height: 1.5;
}

.cf-error-banner[hidden] { display: none; }

.cf-error-banner i { flex-shrink: 0; margin-top: 2px; }


/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] .contact-form,
[data-theme="dark"] .cf-success {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .cf-input {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .cf-input:focus {
  background: var(--color-surface);
  border-color: var(--color-accent);
}

[data-theme="dark"] .cf-select option {
  background: #2a2825;
}

[data-theme="dark"] .contact-social-pill {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-2);
}

/* Same cascade fix as below, for the generic fallback hover (currently
   unused in practice since every pill has a brand-specific modifier
   class, but kept correct in case a future platform is added without
   one yet). */
[data-theme="dark"] .contact-social-pill:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* Brand-color hovers must win over the dark-mode default state above —
   without these, [data-theme="dark"] .contact-social-pill (same
   specificity, later in the cascade) silently overrides the hover
   colors declared earlier in the file. */
[data-theme="dark"] .contact-social-pill--twitter:hover   { background: #000;     color: #fff; border-color: #000; }
[data-theme="dark"] .contact-social-pill--facebook:hover  { background: #1877F2;  color: #fff; border-color: #1877F2; }
[data-theme="dark"] .contact-social-pill--linkedin:hover  { background: #0A66C2;  color: #fff; border-color: #0A66C2; }
[data-theme="dark"] .contact-social-pill--instagram:hover {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #fff;
  border-color: transparent;
}
[data-theme="dark"] .contact-social-pill--substack:hover  { background: #FF6719;  color: #fff; border-color: #FF6719; }
[data-theme="dark"] .contact-social-pill--medium:hover    { background: #000;     color: #fff; border-color: #000; }

[data-theme="dark"] .contact-availability {
  background: color-mix(in srgb, var(--color-success) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-success) 20%, transparent);
}




/* ============================================================
   BLOG PAGE  (blog.html)
   ============================================================ */

/* ── Featured post ───────────────────────────────────────── */
.blog-featured {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-slow) ease;
}

.blog-featured__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 860px) {
  .blog-featured__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.blog-featured__img-wrap {
  position: relative;
  border-radius: var(--radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
}

.blog-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease-out);
}

.blog-featured__img-wrap:hover .blog-featured__img {
  transform: scale(1.03);
}

.blog-featured__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
}

.blog-featured__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.2;
  margin: 0.75rem 0 1rem;
}

.blog-featured__link {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast) ease;
}

.blog-featured__link:hover {
  color: var(--color-accent);
}

.blog-featured__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.75rem;
}

.blog-featured__cta {
  gap: 0.5rem;
}

.blog-featured__cta i {
  transition: transform var(--duration-fast) ease;
}

.blog-featured__cta:hover i {
  transform: translateX(4px);
}


/* ── Blog meta (shared across all post cards) ────────────── */
.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.blog-meta__cat {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-upper);
  color: var(--color-accent);
}

.blog-meta__dot {
  color: var(--color-text-3);
  font-size: var(--text-xs);
}

.blog-meta__date,
.blog-meta__read {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-3);
}


/* ── Filter + Search bar ─────────────────────────────────── */
.blog-controls {
  position: sticky;
  top: var(--header-height);
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--duration-slow) ease,
              border-color var(--duration-slow) ease;
}

.blog-controls.is-scrolled {
  box-shadow: 0 2px 12px rgba(26, 23, 20, 0.07);
}

.blog-controls__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0.85rem var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Filter tabs */
.blog-filter-tabs {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.blog-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-weight: var(--fw-normal);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: color var(--duration-fast) ease,
              background var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out);
  white-space: nowrap;
}

.blog-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Without this, the rule above's own `display: inline-flex` wins over the
   browser's default `[hidden] { display: none }` UA style (author rules
   always beat UA rules), so setting `tab.hidden = true` for an empty
   category (see renderTabCounts() in main.js) would silently do nothing. */
.blog-tab[hidden] {
  display: none;
}

.blog-tab__icon {
  font-size: 0.75em;
  opacity: 0.7;
}

.blog-tab__count {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: var(--fw-medium);
  line-height: 1;
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.45rem;
  min-width: 1.35em;
  text-align: center;
  transition: color var(--duration-fast) ease,
              background var(--duration-fast) ease;
}

.blog-tab:hover .blog-tab__icon { opacity: 1; }

.blog-tab.active .blog-tab__count {
  color: var(--color-white);
  background: rgba(255, 255, 255, 0.25);
}

.blog-tab:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

.blog-tab.active {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: var(--fw-medium);
}

/* Search */
.blog-search-wrap {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.blog-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-3);
  font-size: 0.8rem;
  pointer-events: none;
  transition: color var(--duration-fast) ease;
}

.blog-search-wrap.is-open .blog-search-icon {
  color: var(--color-accent);
}

.blog-search {
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 5rem 0.45rem 2.25rem;
  width: 200px;
  outline: none;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              width var(--duration-base) var(--ease-out);
  appearance: none;
}

.blog-search:focus,
.blog-search-wrap.is-open .blog-search {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
  width: 260px;
}

.blog-search::placeholder {
  color: var(--color-text-3);
}

/* Hide the native cancel button — replaced by our own .blog-search-clear
   button below, which behaves identically across every browser. */
.blog-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Cluster the live count pill and the clear button together so their
   layout is resolved by flexbox rather than by guessed pixel offsets —
   this guarantees the two elements can never overlap, however wide the
   count text ("1" vs "24 results") happens to be. */
.blog-search-controls {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* Custom clear ("×") button — only ever visible once there's text in the
   field, via the `has-value` state set on the wrapper from JS. */
.blog-search-clear {
  position: relative;
  flex-shrink: 0;
  transform: scale(0.6);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--color-text-3);
  color: var(--color-bg);
  font-size: 0.6rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out),
              background var(--duration-fast) ease;
}

.blog-search-wrap.has-value .blog-search-clear {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.blog-search-clear:hover {
  background: var(--color-accent);
}

/* ⌘K / Ctrl+K hint — fades out once the field has focus or a value, so it
   never fights with the clear button for the same corner of the input. */
.blog-search-kbd {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.2rem;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease;
}

.blog-search-wrap.has-value .blog-search-kbd,
.blog-search-wrap.is-open .blog-search-kbd {
  opacity: 0;
}

.blog-search-kbd__key {
  font-family: var(--font-body);
  font-size: 0.62rem;
  line-height: 1;
  color: var(--color-text-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.2rem 0.35rem;
}

@media (max-width: 900px) {
  .blog-search-kbd { display: none; }
}

/* Live result count — pill that pops in while actively searching */
.blog-search-count {
  position: relative;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border-radius: var(--radius-pill);
  padding: 0.15rem 0.5rem;
  white-space: nowrap;
  pointer-events: none;
}

.blog-search-count.is-updated {
  animation: blog-count-pop var(--duration-fast) var(--ease-out);
}

@keyframes blog-count-pop {
  0%   { transform: scale(0.8); opacity: 0.4; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (max-width: 600px) {
  .blog-search-count { display: none; }
}

@media (max-width: 600px) {
  .blog-controls__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
  }
  .blog-search {
    width: 100%;
  }
  .blog-search:focus,
  .blog-search-wrap.is-open .blog-search {
    width: 100%;
  }
  .blog-search-wrap {
    width: 100%;
  }
}


/* ── Posts grid ──────────────────────────────────────────── */
.blog-section {
  padding: var(--space-lg) var(--space-md);
}

.blog-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ── Blog card ───────────────────────────────────────────── */
.blog-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease;
}

.blog-card:hover {
  transform: var(--translate-card-hover);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--color-accent);
}

.blog-card[hidden] {
  display: none;
}

.blog-card__img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.blog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.blog-card:hover .blog-card__img {
  transform: scale(1.04);
}

.blog-card__body {
  padding: 1.4rem 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-normal);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.3;
  margin-bottom: 0.65rem;
}

.blog-card__title a {
  text-decoration: none;
  color: inherit;
  transition: color var(--duration-fast) ease;
}

.blog-card__title a:hover {
  color: var(--color-accent);
}

.blog-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card__read-more {
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  transition: gap var(--duration-fast) ease, color var(--duration-fast) ease;
}

.blog-card__read-more:hover {
  gap: 0.65rem;
}

.blog-card__read-more i {
  font-size: 0.75em;
}


/* ── No results ──────────────────────────────────────────── */
.blog-no-results {
  max-width: 480px;
  width: 100%;
  box-sizing: border-box;
  margin: 2rem auto 3rem;
  text-align: center;
  padding: 3rem 2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  overflow-wrap: break-word;
}

.blog-no-results[hidden] { display: none; }

.blog-no-results__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-bg);
}

.blog-no-results__icon i {
  font-size: 1.4rem;
  color: var(--color-accent);
}

.blog-no-results__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-no-results__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text-2);
  margin-bottom: 1.5rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}


/* ── Blog pagination ─────────────────────────────────────── */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem var(--space-md) var(--space-lg);
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
}

.blog-pagination[hidden] { display: none; }

.blog-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-weight: var(--fw-medium);
  color: var(--color-text-2);
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              background var(--duration-fast) ease;
  white-space: nowrap;
}

.blog-pagination__btn:hover:not(:disabled) {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.blog-pagination__btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.blog-pagination__pages {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: center;
}

.blog-pagination__page {
  min-width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-weight: var(--fw-medium);
  color: var(--color-text-2);
  background: transparent;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              background var(--duration-fast) ease;
}

.blog-pagination__page:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

.blog-pagination__page.is-active {
  color: var(--color-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: var(--fw-semibold);
  cursor: default;
}

.blog-pagination__ellipsis {
  color: var(--color-text-3);
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  padding: 0 0.2rem;
}

@media (max-width: 480px) {
  .blog-pagination { gap: 0.35rem; }
  .blog-pagination__btn { padding: 0.4rem 0.7rem; font-size: var(--text-xs); }
  .blog-pagination__page { min-width: 34px; height: 34px; font-size: var(--text-xs); }
}

[data-theme="dark"] .blog-pagination__page:hover,
[data-theme="dark"] .blog-pagination__btn:hover:not(:disabled) {
  background: var(--color-accent-bg);
}


/* ── Email subscribe ─────────────────────────────────────── */
.blog-subscribe {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  transition: background-color var(--duration-slow) ease;
}

.blog-subscribe__inner {
  max-width: 860px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 720px) {
  .blog-subscribe__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.blog-subscribe__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.blog-subscribe__sub {
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
}

.subscribe-input-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.subscribe-input {
  flex: 1 1 160px;
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.7rem 1rem;
  outline: none;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease;
  min-width: 0;
  appearance: none;
}

.subscribe-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

.subscribe-input::placeholder {
  color: var(--color-text-3);
}

.subscribe-btn {
  white-space: nowrap;
  flex: 0 0 auto;
  justify-content: center;
  min-width: 9.5rem; /* fits "Subscribing…" so the button never resizes or overflows when the label changes */
}

/* Visible feedback now comes from the toast popup (window.showToast,
   triggered alongside this element — see initBlog() in main.js), which
   floats above the page and never shifts layout. This element is kept
   only so screen reader users still get an aria-live announcement tied
   directly to the form itself. */
.subscribe-msg {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── Screen-reader only utility ──────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ── Dark mode ───────────────────────────────────────────── */
[data-theme="dark"] .blog-featured,
[data-theme="dark"] .blog-subscribe {
  background: var(--color-surface-2);
}

[data-theme="dark"] .blog-card {
  background: var(--color-surface);
  border-color: var(--color-border);
}

[data-theme="dark"] .blog-card:hover {
  border-color: var(--color-accent);
}

[data-theme="dark"] .blog-controls {
  background: var(--color-bg);
  border-color: var(--color-border);
}

[data-theme="dark"] .blog-search {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text);
}

[data-theme="dark"] .subscribe-input {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}


/* ============================================================
   BLOG POST PAGE  (blog-post.html)
   reading progress · post hero · cover · layout ·
   article typography · share sidebar · blockquote ·
   tags · author bio · post nav · related posts
   ============================================================ */

/* ── Reading progress bar ─────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-border);
  z-index: 200;
  overflow: hidden;
}

.reading-progress__bar {
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.1s linear;
  transform-origin: left;
}


/* ── Post hero ────────────────────────────────────────────── */
.post-hero {
  background: var(--color-bg);
  margin-top: var(--header-height);
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  transition: background-color var(--duration-slow) ease;
}

.post-hero__inner {
  max-width: 760px;
  margin: 0 auto;
}

.post-hero__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
}

.post-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-text-2);
  text-decoration: none;
  transition: color var(--duration-fast) ease, gap var(--duration-fast) ease;
}

.post-hero__back:hover {
  color: var(--color-accent);
  gap: 0.6rem;
}

.post-hero__back i {
  font-size: 0.8em;
  transition: transform var(--duration-fast) ease;
}

.post-hero__back:hover i {
  transform: translateX(-3px);
}

.post-hero__sep {
  color: var(--color-border);
}

.post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.15;
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}

.post-hero__byline {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.post-hero__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
}

.post-hero__byline-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.post-hero__author {
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

.post-hero__byline-detail {
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}


/* ── Cover image ──────────────────────────────────────────── */
.post-cover {
  padding: var(--space-sm) var(--space-md) var(--space-lg);
  background: var(--color-bg);
}

.post-cover__inner {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 2 / 1;
  box-shadow: var(--card-shadow);
}

.post-cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 600px) {
  .post-cover__inner {
    border-radius: 6px;
    aspect-ratio: 16 / 9;
  }
}


/* ── Post layout: article + share sidebar ─────────────────── */
.post-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 860px) {
  .post-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (max-width: 600px) {
  .post-layout {
    padding: 0 1.25rem var(--space-lg);
  }
}


/* ── Sticky share sidebar ─────────────────────────────────── */
.post-share {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

@media (max-width: 860px) {
  .post-share {
    position: static;
    flex-direction: row;
    justify-content: flex-start;
    padding: 1.25rem 0 0.5rem;
    border-top: 1px solid var(--color-border);
    order: 2; /* show below article on mobile */
  }
}

.post-share__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

@media (max-width: 860px) {
  .post-share__list {
    flex-direction: row;
  }
}

.post-share__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-2);
  font-size: 0.85rem;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.post-share__btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  transform: scale(1.1);
}


/* ── Article typography ───────────────────────────────────── */
.post-article {
  max-width: 680px;
  font-family: var(--font-body);
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--color-text);
}

.post-lead {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.55;
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--color-border);
}

.post-article p {
  margin-bottom: 1.5rem;
  color: var(--color-text);
}

.post-article h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: var(--fw-normal);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
  padding-top: 0.5rem;
}

.post-article h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: var(--fw-normal);
  color: var(--color-heading);
  line-height: 1.3;
  margin: 2rem 0 0.75rem;
}

.post-article em {
  font-style: italic;
  color: var(--color-text);
}

.post-article strong {
  font-weight: var(--fw-medium);
  color: var(--color-heading);
}

.post-article a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease;
}

.post-article a:hover {
  color: var(--color-accent-dark);
}


/* ── Pull quote / blockquote ──────────────────────────────── */
.post-blockquote {
  margin: 2.5rem 0;
  padding: 1.5rem 2rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  position: relative;
}

.post-blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--color-heading);
  line-height: 1.55;
  margin-bottom: 0;
}

.post-blockquote cite {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-style: normal;
  color: var(--color-text-3);
  margin-top: 0.75rem;
}


/* ── Post tags ────────────────────────────────────────────── */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.post-tag {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-2);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  letter-spacing: 0.02em;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
  cursor: default;
}

.post-tag:hover {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
}


/* ── Author bio ───────────────────────────────────────────── */
.post-author-bio {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
}


/* ── Post navigation ──────────────────────────────────────── */
.post-nav {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-md) var(--space-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

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

.post-nav__item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--duration-fast) ease;
}

.post-nav__item:hover {
  background: var(--color-surface-2);
}

.post-nav__item--next {
  text-align: right;
  border-left: 1px solid var(--color-border);
}

@media (max-width: 600px) {
  .post-nav__item--next {
    border-left: none;
    border-top: 1px solid var(--color-border);
    text-align: left;
  }
}

.post-nav__dir {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-upper);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.post-nav__item--next .post-nav__dir {
  justify-content: flex-end;
}

@media (max-width: 600px) {
  .post-nav__item--next .post-nav__dir {
    justify-content: flex-start;
  }
}

.post-nav__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-style: italic;
  font-weight: var(--fw-light);
  color: var(--color-heading);
  line-height: 1.3;
}


/* ── Related posts ────────────────────────────────────────── */
.post-related {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-bg);
}

.post-related__inner {
  max-width: 1080px;
  margin: 0 auto;
}

.post-related__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.post-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 860px) {
  .post-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .post-related__grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}


/* ── Dark mode ────────────────────────────────────────────── */
[data-theme="dark"] .post-hero,
[data-theme="dark"] .post-cover,
[data-theme="dark"] .post-related {
  background: var(--color-bg);
}

[data-theme="dark"] .post-author-bio {
  background: var(--color-surface-2);
}

[data-theme="dark"] .post-blockquote {
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
}

[data-theme="dark"] .post-share__btn {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-2);
}

/* Restore hover in dark mode (specificity must beat the rule above) */
[data-theme="dark"] .post-share__btn:hover,
[data-theme="dark"] .post-share__btn--copy:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  transform: scale(1.1);
}

[data-theme="dark"] .post-tag {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-2);
}

[data-theme="dark"] .post-nav__item:hover {
  background: var(--color-surface-2);
}


/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.toast {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-white);
  background: var(--color-heading);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1.1rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  max-width: 320px;
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success { background: var(--color-success); }
.toast--error   { background: var(--color-error);   }
.toast--info    { background: var(--color-heading);  }

.toast i { font-size: 0.9rem; flex-shrink: 0; }

@media (max-width: 480px) {
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
  }
  .toast { max-width: 100%; }
}


/* ============================================================
   NOSCRIPT BANNER
   ============================================================ */
.noscript-banner {
  background: var(--color-accent);
  color: var(--color-white);
  text-align: center;
  padding: 0.75rem var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  line-height: 1.5;
}

.noscript-banner p { margin: 0; }


/* ============================================================
   SCROLL REVEAL  (.reveal → .is-visible via IntersectionObserver in main.js)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Freshly-inserted grid cards (Works "Load More", Books pagination) —
   same pattern as .reveal above, applied dynamically by main.js right
   before the IntersectionObserver starts watching each new card. */
.work-card.card-reveal,
.book-card.card-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.work-card.card-reveal.is-visible,
.book-card.card-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ── theme-toggle tap target consolidated in base .theme-toggle rule above ── */


/* ============================================================
   DARK MODE — toast, noscript overrides
   ============================================================ */
[data-theme="dark"] .toast--info {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

[data-theme="dark"] .noscript-banner {
  background: var(--color-accent);
}


/* ── 404 search ───────────────────────────────────────────── */
.not-found-search {
  margin-bottom: 2rem;
}

.not-found-search__wrap {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 420px;
  margin: 0 auto;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}

.not-found-search__wrap:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}

.not-found-search__wrap i {
  padding: 0 0.75rem 0 1rem;
  color: var(--color-text-3);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.not-found-search__input {
  flex: 1;
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text);
  background: transparent;
  border: none;
  outline: none;
  padding: 0.7rem 0.5rem;
  min-width: 0;
}

.not-found-search__input::placeholder { color: var(--color-text-3); }

.not-found-search__btn {
  border-radius: 0;
  border-top-right-radius: var(--radius-pill);
  border-bottom-right-radius: var(--radius-pill);
  padding: 0.7rem 1.25rem;
  font-size: var(--text-sm8);
  flex-shrink: 0;
}

[data-theme="dark"] .not-found-search__wrap {
  background: var(--color-surface-2);
}


/* ============================================================
   BOOK CARD — full-card link overlay + share sidebar updates
   ============================================================ */

/* ── Hero background: <picture class="hero-bg"> with <img class="hero-bg-img"> ── */
picture.hero-bg {
  display: block;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transform: var(--scale-hero-bg);
  transition: transform var(--duration-hero-bg) var(--ease-out);
  display: block;
}

.hero:hover .hero-bg-img {
  transform: var(--scale-hero-bg-hover);
}


/* ── 3. Book card — entire card clickable (like works card) ─ */
.book-card__card-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}


/* ── 4. Post hero engagement bar ────────────────────────────  */
.post-hero__engagement {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.12);
}

[data-theme="light"] .post-hero__engagement {
  border-color: var(--color-border);
}

.post-engagement-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text-3);
}

.post-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  color: var(--color-text-3);
  background: none;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.8rem;
  cursor: pointer;
  transition: color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              background var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.post-like-btn:hover,
.post-like-btn.is-liked {
  color: #e0245e;
  border-color: #e0245e;
  background: rgba(224, 36, 94, 0.07);
}

.post-like-btn.is-liked i {
  font-weight: 900;    /* solid heart via font-weight trick */
}

.post-like-btn:active {
  transform: scale(0.92);
}


/* ── 5. Share sidebar — label with icon ─────────────────── */
.post-share__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-upper);
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
  writing-mode: vertical-lr;
  transform: rotate(180deg);
}

.post-share__label i {
  font-size: 0.75rem;
}

@media (max-width: 860px) {
  .post-share__label {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 0;
    margin-right: 0.5rem;
  }
}

/* WhatsApp share button */
.post-share__btn--whatsapp:hover {
  background: #25D366;
  color: var(--color-white);
  border-color: #25D366;
}

.post-share__btn--twitter:hover  { background: #000; color: #fff; border-color: #000; }
.post-share__btn--facebook:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.post-share__btn--linkedin:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.post-share__btn--copy:hover     { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }


/* ── 6. Post tags wrapper (full-width, below article) ───── */
.post-tags-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-md) 2rem;
}


/* ── 7. Author bio — aligned correctly ──────────────────── */
.post-author-bio__inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
}

.post-author-bio__avatar {
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-border);
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}

.post-author-bio__text {
  flex: 1;
  min-width: 0;
}

.post-author-bio__name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: var(--fw-normal);
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.post-author-bio__bio {
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 1rem;
}

.post-author-bio__links {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.post-author-bio__social {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-2);
  font-size: 0.85rem;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.post-author-bio__social:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

@media (max-width: 560px) {
  .post-author-bio__inner {
    flex-direction: column;
    gap: 1rem;
  }
  .post-author-bio__avatar {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }
}


/* ── Related posts grid ID fix ───────────────────────────── */
#post-related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

@media (max-width: 860px) { #post-related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { #post-related-grid { grid-template-columns: 1fr; gap: 1.5rem; } }


/* ============================================================
   WORKS LOAD-MORE WRAP
   ============================================================ */
.works-load-more-wrap {
  text-align: center;
  padding: 0.5rem var(--space-md) 2rem;
  max-width: 1080px;
  margin: 0 auto;
}
.works-load-more-wrap[hidden] { display: none; }


/* ============================================================
   INKTERLUDE EVENT POPUP
   ============================================================ */
.ikt-popup {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}
.ikt-popup.ikt-popup--visible {
  opacity: 1;
  pointer-events: all;
}
.ikt-popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ikt-popup__card {
  position: relative;
  z-index: 1;
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  max-width: 520px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  transform: translateY(24px) scale(0.97);
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-slow) ease;
}
.ikt-popup--visible .ikt-popup__card {
  transform: translateY(0) scale(1);
}
.ikt-popup__close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  z-index: 10;
  width: 34px; height: 34px;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}
.ikt-popup__close:hover { background: rgba(0,0,0,0.72); }
.ikt-popup__banner {
  position: relative;
  aspect-ratio: 16/7;
  overflow: hidden;
}
.ikt-popup__banner-img { width: 100%; height: 100%; object-fit: cover; }
.ikt-popup__banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,8,5,0.2) 0%, rgba(10,8,5,0.75) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 1.5rem;
  gap: 0.3rem;
}
.ikt-popup__logo-mark {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1;
}
.ikt-popup__logo-mark .inkspired-ink   { color: var(--color-accent-2); }
.ikt-popup__logo-mark .inkspired-spired { color: #fff; }
.ikt-popup__edition {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.ikt-popup__body { padding: 2rem; }
.ikt-popup__heading {
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.1;
  margin-bottom: 0.75rem;
}
.ikt-popup__caption {
  font-size: 0.9rem;
  color: var(--color-text-2);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.ikt-popup__actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-start;
}
.ikt-popup__dismiss {
  background: none; border: none; padding: 0;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease;
}
.ikt-popup__dismiss:hover { color: var(--color-text-2); }
@media (max-width: 560px) {
  .ikt-popup__card { margin: 0; border-radius: var(--radius-base); }
  .ikt-popup__body { padding: 1.5rem; }
  .ikt-popup__heading { font-size: 1.5rem; }
}


/* ============================================================
   NEW BOOK ALERT POPUP
   ============================================================ */
.book-alert-popup {
  position: fixed;
  inset: 0;
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-base) ease;
}
.book-alert-popup.book-alert--visible {
  opacity: 1;
  pointer-events: all;
}
.book-alert__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.book-alert__card {
  position: relative;
  z-index: 1;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  max-width: 640px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 32px 96px rgba(0,0,0,0.4);
  transform: translateY(28px) scale(0.96);
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-slow) ease;
}
.book-alert--visible .book-alert__card {
  transform: translateY(0) scale(1);
}
.book-alert__close {
  position: absolute;
  top: 0.85rem; right: 0.85rem;
  z-index: 10;
  width: 34px; height: 34px;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease;
}
.book-alert__close:hover { background: rgba(0,0,0,0.65); }
.book-alert__inner {
  display: grid;
  grid-template-columns: 250px 1fr;
}
@media (max-width: 560px) {
  .book-alert__inner { grid-template-columns: 1fr; }
}
.book-alert__cover-wrap {
  position: relative;
  background: var(--color-surface-2);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.book-alert__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.book-alert__badge {
  position: absolute;
  top: 1rem; left: 1rem;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  color: #fff;
}
.book-alert__badge--new      { background: var(--color-accent); }
.book-alert__badge--preorder { background: #0a66c2; }
.book-alert__badge--free     { background: var(--color-success); }
.book-alert__body {
  padding: 1.75rem 1.75rem 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 560px) {
  .book-alert__body { padding: 1.5rem; }
  .book-alert__cover-wrap { min-height: 180px; }
}
.book-alert__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.book-alert__subtitle {
  font-family: var(--font-body);
  font-size: var(--text-sm8);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.book-alert__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm13);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-alert__publisher {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-3);
  margin-bottom: 1.25rem;
}
.book-alert__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.btn-book-action {
  font-size: var(--text-sm8);
  gap: 0.4rem;
}
.book-alert__dismiss {
  background: none; border: none; padding: 0;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  align-self: flex-start;
  transition: color var(--duration-fast) ease;
}
.book-alert__dismiss:hover { color: var(--color-text-2); }

[data-theme="dark"] .book-alert__card,
[data-theme="dark"] .ikt-popup__card {
  background: var(--color-surface);
}


/* ============================================================
   DISQUS COMMENTS
   ============================================================ */
.post-comments {
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-md);
  transition: background var(--duration-slow) ease;
}

.post-comments__inner {
  max-width: 760px;
  margin: 0 auto;
}

.post-comments__heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: var(--fw-light);
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

#disqus_thread {
  min-height: 200px;
}

/* Dark mode — nudge Disqus iframe background */
[data-theme="dark"] .post-comments {
  background: var(--color-surface-2);
}

[data-theme="dark"] #disqus_thread iframe {
  color-scheme: dark;
}


/* ================================================================
   TESTIMONIALS SLIDER  (index.html)
   Data: assets/js/testimonials-data.js  ·  JS: initTestimonials() in main.js
   ================================================================ */

/* ─── Section ─── */
.testimonials-section {
  padding: var(--space-lg) var(--space-md);
  background: var(--color-surface-2);
  border-top: var(--border-thin) solid var(--color-border);
  transition: background-color var(--duration-slow) ease;
}

/* Heading keeps a slightly larger, responsive clamp size here; label,
   header spacing, and subtitle now come from the shared .section-header
   system (see global TYPOGRAPHY block) so this section reads the same
   as every other section on the site instead of using its own pill-
   badge label treatment. */
.testimonials-section .section-heading {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: var(--fw-light);
  font-style: italic;
  line-height: var(--lh-heading);
  margin-bottom: 0.75rem;
}

/* ─── Slider wrapper ─── */
.ts-slider-wrapper {
  position: relative;
  max-width: var(--max-w-md);
  margin: 0 auto;
}

.ts-slider-outer {
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ts-slider-track {
  display: flex;
  transition: transform var(--duration-slow) var(--ease-in-out);
  /* Static will-change (rather than toggling it from JS on every slide
     change) keeps the track on its own GPU layer permanently. Promoting
     and demoting the layer mid-transition was what caused the cards to
     visibly flicker/fade during autoplay — see main.js initTestimonials(). */
  will-change: transform;
}

.ts-slider-track.no-transition {
  transition: none;
}

/* ─── Card ─── */
.ts-card {
  flex: 0 0 100%;
  min-width: 0;
  background: var(--card-bg);
  border-radius: var(--radius-card);
  padding: 2.2rem 2rem;
  border: var(--border-thin) solid var(--color-border);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration-base) var(--ease-in-out),
              transform var(--duration-base) var(--ease-in-out);
  position: relative;
  overflow: hidden;
}

.ts-slider-wrapper:not(.is-dragging) .ts-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: var(--translate-card-hover);
}

/* Decorative quote mark */
.ts-card__quote-bg {
  position: absolute;
  top: -6px;
  right: 20px;
  font-size: 110px;
  font-family: Georgia, serif;
  color: var(--color-accent-bg);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  font-weight: var(--fw-bold);
  opacity: 0.6;
}

/* Rating row */
.ts-card__rating {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ts-stars { display: flex; gap: 3px; }

.ts-star {
  font-size: 17px;
  color: var(--color-accent-2);
  display: inline-block;
  /* forwards: holds the end state (opacity:1) but does NOT apply the start
     state (opacity:0) backwards during the delay — prevents stars from
     flashing invisible when the slider repaints on autoplay */
  animation: ts-starPop 0.4s ease forwards;
}

.ts-star:nth-child(1) { animation-delay: 0.05s; }
.ts-star:nth-child(2) { animation-delay: 0.10s; }
.ts-star:nth-child(3) { animation-delay: 0.15s; }
.ts-star:nth-child(4) { animation-delay: 0.20s; }
.ts-star:nth-child(5) { animation-delay: 0.25s; }

.ts-rating-score {
  font-size: var(--text-sm8);
  font-weight: var(--fw-semibold);
  color: var(--color-text-2);
}

/* Verified badge */
.ts-verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(45, 122, 58, 0.1);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
  font-family: var(--font-body);
  letter-spacing: var(--ls-slight);
}

.ts-verified-icon {
  width: 13px;
  height: 13px;
  background: var(--color-success);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ts-verified-icon::after {
  content: '✓';
  color: white;
  font-size: 8px;
  line-height: 1;
}

/* Card title */
.ts-card__title {
  font-size: var(--text-md4);
  font-weight: var(--fw-semibold);
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 12px;
  line-height: var(--lh-compact);
  font-family: var(--font-display);
}

/* Card body */
.ts-card__body {
  font-size: var(--text-sm12);
  color: var(--color-text);
  line-height: var(--lh-prose);
  margin-bottom: 1.5rem;
}

/* Divider */
.ts-card__divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border), transparent);
  margin-bottom: 1.4rem;
}

/* Author row */
.ts-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ts-avatar-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-base) solid var(--color-border);
  flex-shrink: 0;
}

.ts-avatar-initials {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-accent-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-md);
  color: var(--color-accent);
  flex-shrink: 0;
  border: var(--border-base) solid rgba(184, 137, 42, 0.18);
}

/* Without this, the class's own `display: flex` above wins over the
   browser's default `[hidden] { display: none }` UA style (author rules
   always beat UA rules), so the initials circle would render at the same
   time as the avatar photo instead of staying hidden behind it. */
.ts-avatar-initials[hidden] {
  display: none;
}

.ts-author-info { flex: 1; }

.ts-author-name {
  font-size: var(--text-sm13);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin-bottom: 2px;
  font-family: var(--font-body);
}

.ts-author-role {
  font-size: var(--text-xs);
  color: var(--color-text-2);
  line-height: var(--lh-text);
}

/* Card footer */
.ts-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.2rem;
  flex-wrap: wrap;
  gap: 8px;
}

.ts-card__date {
  font-size: var(--text-xs);
  color: var(--color-text-3);
  font-family: var(--font-body);
}

/* Label badges */
.ts-badge {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  letter-spacing: var(--ls-slight);
  background: var(--color-accent-bg);
  color: var(--color-accent-dark);
}

.ts-badge--red {
  background: rgba(192, 57, 43, 0.1);
  color: var(--color-error);
}

/* ─── Slider controls ─── */
.ts-slider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 2rem;
}

.ts-slider-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: var(--border-base) solid var(--color-border);
  background: var(--card-bg);
  color: var(--color-text);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--duration-base) var(--ease-in-out);
  box-shadow: var(--card-shadow);
  line-height: 1;
}

.ts-slider-btn:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-btn-accent);
  transform: var(--translate-btn-hover);
}

.ts-slider-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Pagination dots */
.ts-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ts-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  cursor: pointer;
  transition: all 0.35s var(--ease-in-out);
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.ts-dot.is-active {
  width: 22px;
  background: var(--color-accent);
}

.ts-dot:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ─── Keyframes (ts- prefix) ─── */
@keyframes ts-starPop {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── Dark mode overrides ─── */
[data-theme="dark"] .ts-badge {
  background: rgba(212, 168, 67, 0.12);
  color: var(--color-accent-2);
}

[data-theme="dark"] .ts-badge--red {
  background: rgba(192, 57, 43, 0.15);
  color: #e07060;
}

[data-theme="dark"] .ts-verified-badge {
  background: rgba(45, 122, 58, 0.15);
}

[data-theme="dark"] .ts-avatar-initials {
  background: rgba(212, 168, 67, 0.12);
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .ts-slider-track,
  .ts-slider-btn,
  .ts-dot,
  .ts-card { transition: none !important; }
  .ts-star  { animation: none !important; }

  /* Hero entrance animations — show content immediately instead of
     fading/sliding it in, for users sensitive to motion. */
  .hero-content,
  .hero-label,
  .hero-quote,
  .hero-cite,
  .hero-content .btn,
  .hero-scroll {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .scroll-line { animation: none !important; }

  /* Scroll-reveal (.reveal) and freshly-inserted grid cards (.card-reveal) —
     show content immediately instead of fading/sliding it in. */
  .reveal,
  .work-card.card-reveal,
  .book-card.card-reveal {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─── Mobile ─── */
@media (max-width: 600px) {
  .testimonials-section { padding: var(--space-md) var(--space-sm); }
  .ts-card              { padding: 1.5rem 1.2rem; }
  .ts-card__quote-bg    { font-size: 110px; }
  .ts-slider-btn        { width: 38px; height: 38px; font-size: 15px; }
}