/* ============================================================
   styles.css — INKspiredNG 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 {
  /* Core palette */
  --color-bg:         #faf8f4;
  --color-surface:    #ffffff;
  --color-surface-rgb: 255, 255, 255;
  --color-surface-2:  #f3efe8;
  --color-border:     #e2ddd4;
  --color-text:       #1a1714;
  --color-text-2:     #5c5650;
  --color-text-3:     #9c9690;

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

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

  /* Semantic state colors (Admin System, Batch 2) — added per the
     Admin Build Prompt's Design Tokens section: the public site had
     no danger/success/warning/info palette since it's a content site,
     not a dashboard, but the admin needs one, and it belongs here as
     a real token rather than trapped in admin.css. Not used by any
     public-facing page today — admin/css/admin.css is their only
     consumer as of this batch. */
  --color-danger:      #c0392b;
  --color-danger-bg:   #fdf1ef;
  --color-danger-hover: #a53222;
  --color-success:     #2f7d4f;
  --color-success-bg:  #eff8f2;
  --color-warning:     #b8892a;
  --color-warning-bg:  #fdf6ea;
  --color-info:        #3b6ea5;
  --color-info-bg:     #eef4fa;

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

  /* 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);

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

  /* Spacing */
  --space-md:   2rem;
  --space-lg:   4rem;
  --space-xl:   7rem;

  /* Motion */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    600ms;
}

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

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

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

  /* Semantic state colors (Admin System, Batch 2) — see the :root
     block's comment above for why these exist. */
  --color-danger:      #e0685a;
  --color-danger-bg:   #2a1613;
  --color-danger-hover: #ea8577;
  --color-success:     #4fae76;
  --color-success-bg:  #12241a;
  --color-warning:     #d4a843;
  --color-warning-bg:  #2a220f;
  --color-info:        #6ea0d6;
  --color-info-bg:     #10202f;

  --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-rgb: 28, 26, 23;
    --color-surface-2:  #252320;
    --color-border:     #2e2c28;
    --color-text:       #f0ece4;
    --color-text-2:     #a09a92;
    --color-text-3:     #6e6860;
    --color-accent:     #d4a843;
    --color-accent-rgb: 212, 168, 67;
    --color-accent-2:   #e8c46a;
    --color-accent-bg:  rgba(212, 168, 67, 0.1);
    --color-heading:    #f0ece4;
    --color-link:       #d4a843;
    --color-link-hover: #e8c46a;
    --color-danger:      #e0685a;
    --color-danger-bg:   #2a1613;
    --color-danger-hover: #ea8577;
    --color-success:     #4fae76;
    --color-success-bg:  #12241a;
    --color-warning:     #d4a843;
    --color-warning-bg:  #2a220f;
    --color-info:        #6ea0d6;
    --color-info-bg:     #10202f;
    --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: 16px;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  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); }

ul { list-style: none; }

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

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

.section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  display: block;
  margin-bottom: 0.75rem;
}

.section-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 2rem;
  border-radius: 2px;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-accent);
  color: #fff;
  border: 1.5px solid var(--color-accent);
}
.btn--primary:hover {
  background-color: var(--color-link-hover);
  border-color: var(--color-link-hover);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 137, 42, 0.35);
}

.btn--disabled,
.btn--disabled:hover {
  background-color: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--outline {
  background-color: transparent;
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn--outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-2px);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background-color: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px 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: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

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

.logo-img {
  height: 32px;
  width: auto;
}

/* Two real logo files (light-background and dark-background
   versions) instead of approximating white via a CSS filter —
   filter: invert() can introduce color casts on anything that
   isn't perfectly pure black/white, where a real white asset
   always looks correct. */
.logo-img--dark { display: none; }
[data-theme="dark"] .logo-img--light { display: none; }
[data-theme="dark"] .logo-img--dark  { display: block; }

.logo-text {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.02em;
  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: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-2);
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 3px;
  position: relative;
  transition: color var(--duration-fast) ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0.75rem; right: 0.75rem;
  height: 1.5px;
  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);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Theme toggle button */
.theme-toggle {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-2);
  border-radius: 50%;
  transition: color var(--duration-fast) ease,
              background-color var(--duration-fast) ease;
  font-size: 20px; /* icon size on desktop — controls the <i> glyph, since it's an icon-font, not an SVG */
}
.theme-toggle:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
}

@media (max-width: 1024px) {
  .theme-toggle {
    font-size: 22px;     /* larger glyph on mobile, per spec */
    width: 44px;         /* WCAG 2.5.5 minimum tap target — achieved via the
                             button's own box, not by inflating the icon further */
    height: 44px;
  }
}

.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: 44px;
  height: 44px;
  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: 1100;        /* above header(1000), nav drawer(950), overlay(940) */
  flex-shrink: 0;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 24px;
  pointer-events: none;
}

.hamburger span {
  display: block;
  height: 2.5px;          /* bolder: was 1.5px */
  width: 24px;
  background-color: var(--color-text);
  border-radius: 3px;
  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: 16px;
  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: 24px;
}
.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: 24px;
}

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

.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.05);
  transition: transform 8s var(--ease-out);
}

.hero-bg--photo {
  background-image: url('../images/hero.webp');
}

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

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 5, 0.3) 0%,
    rgba(10, 8, 5, 0.55) 50%,
    rgba(10, 8, 5, 0.75) 100%
  );
}

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

.hero-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-accent-2);
  margin-bottom: 2rem;
  animation: fadeUp 1s var(--ease-out) 0.2s both;
}

.hero-quote {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  font-weight: 300;
  font-style: italic;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 1.25rem;
  animation: fadeUp 1s var(--ease-out) 0.35s both;
}

.quote-mark {
  font-size: 1.2em;
  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: 0.82rem;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  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: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  animation: fadeIn 1s ease 1.2s both;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.5));
  animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-text {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */

.portrait-frame {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--card-shadow);
}

/* On mobile, the decorative offset accent border is dropped rather than
   shown via overflow:visible — that would also disable the overflow:hidden
   clipping the frame needs for its border-radius to actually round the
   image's corners, breaking the rounded-corner look on small screens. */
@media (max-width: 860px) {
  .portrait-frame::before {
    display: none;
  }
}

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

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fill the 3:4 frame edge-to-edge like a real portrait crop */
  object-position: center top; /* keep faces/heads in frame if the source photo is taller */
  display: block;
  position: relative;
  z-index: 1;
  background-color: var(--color-surface-2); /* fallback while the photo loads */
}

/* ============================================================
   SECTION DIVIDER
   ============================================================ */
.section-divider {
  padding: clamp(2.5rem, 6vw, 4rem) 2rem;
  background-color: var(--color-surface-2);
  transition: background-color var(--duration-slow) ease;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.divider-inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.divider-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-border) 50%, transparent);
}

.divider-heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  white-space: nowrap;
  color: var(--color-heading);
}

/* ============================================================
   WORKS GRID
   ============================================================ */

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

.cta-band__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

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

.cta-band__heading {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

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

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  /* padding-top removed — email row (first child) provides its own top padding.
     When email row is absent, footer-inner gets padding via its own rule. */
  transition: background-color var(--duration-slow) ease;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-lg) 2rem var(--space-md);  /* top padding handles pages without email row */
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 4rem;
}

/* When email row precedes footer-inner, reduce top padding to avoid double spacing */

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

.footer-tagline {
  font-size: 0.85rem;
  color: var(--color-text-2);
  line-height: 1.6;
}

.footer-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-accent);
  background: transparent;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease;
}
.footer-install-btn:hover,
.footer-install-btn:focus-visible {
  background-color: var(--color-accent);
  color: #fff;
}

.pwa-install-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--color-text-2);
  max-width: 26ch;
  line-height: 1.5;
}

.footer-heading {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: 1rem;
  /* 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: 0.9rem;
  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: 0.88rem;
  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: 16px; text-align: center; font-size: 0.95rem; }

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

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

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

.footer-credit a {
  color: var(--color-text-3);
  text-decoration: none;
  border-bottom: 1px 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);
}

.back-to-top {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  text-decoration: none;
  font-size: 0.8rem;
  transition: background-color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}
.back-to-top:hover {
  background-color: var(--color-accent);
  color: #fff;
  transform: translateY(-3px);
}

/* ============================================================
   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); }
}

/* Scroll-reveal utility (JS adds .revealed) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}
.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; }
.reveal-delay-5 { transition-delay: 0.5s; }

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

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

/* ============================================================
   RESPONSIVE — TABLET & MOBILE  (≤ 1024px)
   Widened from 860px to 1024px so the hamburger nav covers
   tablets in landscape too (not just portrait), per request —
   this is the ONLY 860px breakpoint changed; all other ≤860px
   rules in this file (grids, cards, typography) are unrelated
   to navigation and were left untouched.
   ============================================================ */
@media (max-width: 1024px) {

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

  /* 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: 50%;
  }

  /* ── Nav drawer slides in from right ──────────────────── */
  .main-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: min(320px, 85vw);
    height: 100dvh;          /* dynamic viewport height — avoids browser chrome issues */
    background-color: var(--color-surface);
    border-left: 1px solid var(--color-border);
    z-index: 950;
    /* Padding: top clears the fixed header; sides & bottom give breathing room */
    padding: 0;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s var(--ease-out);
    box-shadow: -16px 0 48px rgba(0, 0, 0, 0.18);
    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: 1px 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 2rem;
    overflow-y: auto;
    flex: 1;
  }

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

  .main-nav .nav-list > li:last-child {
    border-bottom: none;
    margin-top: 0.5rem;
    /* No padding here — the nav-link inside handles its own padding */
  }

  .nav-link {
    /* Reset desktop styles */
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.06em;
    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: 1.5px solid var(--color-text-3);
    border-bottom: 1.5px 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: 500;
    color: var(--color-accent);
    border-left: 3px 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);
  }

  /* INKspired accent pill — full-width tap target in drawer */

  /* ── Layout fixes ─────────────────────────────────────── */

  .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;
  }

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

  .hero-quote {
    font-size: 1.6rem;
  }

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

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

  .footer-bottom {
    padding: 1rem 2rem;
  }

  .divider-inner {
    gap: 1rem;
  }

  .divider-heading {
    font-size: 1.7rem;
    white-space: normal;
    text-align: center;
  }
}

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

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

.page-hero__title {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 300;
  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: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

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

.bio-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 5rem;
  align-items: start;
}

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

.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: 1.9rem;
  font-weight: 600;
  color: var(--color-accent);
  line-height: 1;
}

.fact-label {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  line-height: 1.3;
}

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

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

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

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

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

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

.bio-block .section-label {
  margin-bottom: 1rem;
}

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

/* Contact actions */

/* Secondary CTA bar */

/* ============================================================
   BOOK FEATURED (books.html)
   ============================================================ */

/* ============================================================
   BOOKS GRID (books.html)
   ============================================================ */

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

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

}

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

}

/* ============================================================
   LIBRARY HERO — books.html
   ============================================================ */
.lib-hero {
  position: relative;
  height: 92vh;
  min-height: 560px;
  max-height: 860px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.lib-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.04);
  transition: transform 8s var(--ease-out);
}

.lib-hero:hover .lib-hero__bg { transform: scale(1.0); }

.lib-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16,15,13,0.35) 0%,
    rgba(16,15,13,0.62) 55%,
    rgba(16,15,13,0.88) 100%
  );
}

.lib-hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.lib-hero__heading {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  font-weight: 300;
  font-style: normal;
  color: #fff;
  line-height: 1.0;
  margin: 0;
}

/* Brand-mark treatment matching the INKspired logo: "INK" in the
   accent gold, "spired" in white — same pairing this heading used
   to get from its old <em>Free Library</em> accent color. */
.lib-hero__heading .inkspired-ink {
  color: var(--color-accent-2);
}

.lib-hero__heading .inkspired-spired {
  color: #fff;
}

.lib-hero__sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2.2vw, 1.15rem);
  color: rgba(255,255,255,0.78);
  max-width: 480px;
  margin: 0;
  line-height: 1.6;
}

.lib-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   INKSPIRED INTRO BAND
   ============================================================ */
.inkspired-intro {
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 2rem;
  text-align: center;
}

.inkspired-intro__inner p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text-2);
  margin: 0;
}

.inkspired-intro__inner a {
  color: var(--color-accent);
  text-decoration: none;
}

.inkspired-intro__inner a:hover { text-decoration: underline; }

/* ============================================================
   LIBRARY SECTION SHELL
   ============================================================ */
.lib-section {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
  background: var(--color-bg);
}

.lib-section__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* Section header */
.lib-section__header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.lib-section__heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.lib-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
}

.lib-section__count {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-2);
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── Search ─────────────────────────────────────────────────── */
.lib-search-wrap {
  position: relative;
  max-width: 600px;
}

.lib-search__icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.85rem;
  color: var(--color-text-3);
  pointer-events: none;
  transition: color var(--duration-fast);
  z-index: 1;
}

.lib-search-wrap:focus-within .lib-search__icon {
  color: var(--color-accent);
}

.lib-search {
  width: 100%;
  height: 52px;
  padding: 0 7.5rem 0 2.75rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  outline: none;
  transition: border-color var(--duration-fast),
              box-shadow   var(--duration-fast),
              background   var(--duration-fast);
  -webkit-appearance: none;
  appearance: none;
}

/* Remove browser-native clear button — we have our own */
.lib-search::-webkit-search-cancel-button { display: none; }

.lib-search:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
  background: var(--color-bg);
}

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

/* Keyboard shortcut hint pill — fades out when there's typed text */
.lib-search__kbd {
  position: absolute;
  right: 3.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  padding: 0.22em 0.55em;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-surface-2);
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--color-text-3);
  pointer-events: none;
  letter-spacing: 0.03em;
  opacity: 1;
  transition: opacity var(--duration-fast);
  white-space: nowrap;
}

.lib-search-wrap.has-value .lib-search__kbd,
.lib-search-wrap:focus-within .lib-search__kbd {
  opacity: 0;
}

/* ⌘ symbol sizing */
.lib-search__kbd-meta { font-size: 0.75em; }

/* Clear button — hidden until has-value */
.lib-search__clear {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%) scale(0.7);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-3);
  border-radius: 50%;
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: color       var(--duration-fast),
              background  var(--duration-fast),
              opacity     var(--duration-fast),
              transform   var(--duration-fast);
}

/* Only show and become interactive when the field has text */
.lib-search-wrap.has-value .lib-search__clear {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.lib-search__clear:hover {
  color: var(--color-text);
  background: var(--color-surface-2);
}

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

/* ── Filter tabs ─────────────────────────────────────────────── */
.lib-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.lib-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  height: 38px;
  padding: 0 1.1rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-2);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--duration-fast);
  position: relative;
}

.lib-filter-tab:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

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

.lib-filter-tab--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

.lib-filter-tab--active:hover {
  color: #fff;
  background: var(--color-link-hover);
  border-color: var(--color-link-hover);
}

/* Book count badge inside each tab */
.lib-filter-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.3em;
  border-radius: 999px;
  font-size: 0.68em;
  font-weight: 700;
  line-height: 1;
  background: rgba(255,255,255,0.2);
  color: inherit;
  transition: background var(--duration-fast);
}

.lib-filter-tab:not(.lib-filter-tab--active) .lib-filter-tab__count {
  background: var(--color-surface-2);
  color: var(--color-text-3);
}

/* Count badge pulse animation */
.count-updated {
  animation: count-pulse 380ms var(--ease-out) forwards;
}

@keyframes count-pulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ── State containers (loading / error / empty) ─────────────── */
.lib-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1rem;
  padding: 5rem 2rem;
}

.lib-state--loading { color: var(--color-text-2); }
.lib-state--error   { color: var(--color-text-2); }

.lib-state--empty {
  display: none;
  border: 1.5px dashed var(--color-border);
  border-radius: 12px;
  margin-top: 1rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.lib-state__spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.lib-state__icon {
  font-size: 2.2rem;
  color: var(--color-text-3);
  margin-bottom: 0.25rem;
}

.lib-state h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.lib-state p {
  font-size: 0.9rem;
  color: var(--color-text-2);
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Book grid ───────────────────────────────────────────────── */
.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2rem;
}

/* ── Book card (fully clickable <a>) ─────────────────────────── */
.book-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--card-shadow);
  transition: transform 320ms var(--ease-out),
              box-shadow 320ms var(--ease-out),
              border-color 200ms;
  will-change: transform;
}

.book-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: transparent;
}

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

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

.book-card__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out);
}

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

/* Shine overlay on hover */
.book-card__cover-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.06) 100%
  );
  opacity: 0;
  transition: opacity 320ms;
}

.book-card:hover .book-card__cover-shine { opacity: 1; }

/* Rating badge */
.book-card__rating {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.25em;
  background: rgba(16,15,13,0.78);
  backdrop-filter: blur(4px);
  color: var(--color-accent-2);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.28em 0.6em;
  border-radius: 999px;
  line-height: 1;
}

/* Body */
.book-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.1rem 1.1rem 1rem;
  gap: 0.4rem;
}

.book-card__category {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.book-card__title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color var(--duration-fast);
}

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

.book-card__author {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-2);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.book-card__excerpt {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--color-text-2);
  margin: 0.15rem 0 0;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Footer row */
.book-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.book-card__format {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-text-3);
  display: flex;
  align-items: center;
  gap: 0.35em;
}

.book-card__format--paid {
  color: var(--color-accent-2);
  font-weight: 600;
}

.book-card__cta {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-accent);
  display: flex;
  align-items: center;
  gap: 0.35em;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 220ms, transform 220ms var(--ease-out), color var(--duration-fast);
}

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

/* ── Pagination ───────────────────────────────────────────────── */
.lib-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 3.5rem;
  flex-wrap: wrap;
}

.lib-pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  height: 40px;
  padding: 0 1.25rem;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-text-2);
  cursor: pointer;
  transition: all var(--duration-fast);
}

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

.lib-pagination__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

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

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

.lib-pagination__page {
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-2);
  cursor: pointer;
  transition: all var(--duration-fast);
  display: flex;
  align-items: center;
  justify-content: center;
}

.lib-pagination__page:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.lib-pagination__page.is-active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}

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

.lib-pagination__ellipsis {
  width: 32px;
  text-align: center;
  color: var(--color-text-3);
  font-size: 0.85rem;
  user-select: none;
}

/* ============================================================
   BOOK DETAIL — book.html
   ============================================================ */
.book-detail {
  padding: clamp(3.25rem, 6vw, 5.5rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--color-bg);
}

.book-detail__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) 0;
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: clamp(3rem, 6vw, 5rem);
  align-items: start;
}

/* Cover column */
.book-detail__cover-col {
  position: sticky;
  top: calc(var(--header-height) + 2rem);
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-top: 0.25rem;
}

.book-detail__cover-wrap {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(16,15,13,0.22), 0 6px 18px rgba(16,15,13,0.12);
  transition: box-shadow 320ms var(--ease-out), transform 320ms var(--ease-out);
  background: var(--color-surface-2);
  aspect-ratio: 3 / 4;
}

.book-detail__cover-col:hover .book-detail__cover-wrap {
  transform: translateY(-4px) rotate(-0.5deg);
  box-shadow: 0 36px 80px rgba(16,15,13,0.28), 0 10px 28px rgba(16,15,13,0.14);
}

.book-detail__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rating + download badge (preserved widgets) */
.book-rating { width: 100%; }

.download-badge {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1.1rem;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-2);
}

.download-badge i { color: var(--color-accent); font-size: 1rem; }

/* Info column */
.book-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.work-card__tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-2);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3em 0.85em;
}

.work-card__tag--coming-soon {
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  border-color: var(--color-accent);
}

.book-detail__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.15;
  margin: 0 0 0.5rem;
}

.book-detail__author {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-2);
  margin: 0 0 0.25rem;
}

.book-detail__author a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast);
}

.book-detail__author a:hover { border-color: var(--color-accent); }

.book-detail__contributors {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-2);
  margin: 0 0 1.5rem;
  font-style: italic;
}

.book-detail__desc {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.8;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.book-detail__desc p + p { margin-top: 1rem; }

/* Metadata table */
.book-detail__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 2rem;
  row-gap: 0.7rem;
  margin: 1.75rem 0;
  padding: 1.5rem;
  background: var(--color-surface-2);
  border-radius: 10px;
}

.meta-row { display: contents; }

.meta-row dt {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  padding-top: 0.1em;
}

.meta-row dd {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--color-text);
  margin: 0;
}

/* Action buttons */
.book-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 2rem 0 1.75rem;
}

/* Social sharing */
.book-detail__share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border);
}

.share-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-right: 0.25rem;
}

.share-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-2);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all var(--duration-fast);
  cursor: pointer;
}

.share-btn:hover,
.share-btn:focus-visible { transform: translateY(-2px); }

.share-btn--twitter:hover   { background: #000; border-color: #000; color: #fff; }
.share-btn--facebook:hover  { background: #1877f2; border-color: #1877f2; color: #fff; }
.share-btn--whatsapp:hover  { background: #25d366; border-color: #25d366; color: #fff; }
.share-btn--linkedin:hover  { background: #0a66c2; border-color: #0a66c2; color: #fff; }
.share-btn--copy:hover      { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

.share-btn--copied,
.share-btn--copied:hover {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}

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

/* ============================================================
   COMMENTS SECTION
   ============================================================ */
.comments-section {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.comments-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ============================================================
   MORE DOWNLOADS
   ============================================================ */
.more-downloads {
  padding: clamp(3.5rem, 6vw, 5.5rem) 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
}

.more-downloads__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}

.more-downloads__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0.5rem 0 2.5rem;
}

.more-downloads__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.more-dl-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out);
  box-shadow: var(--card-shadow);
}

.more-dl-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-shadow-hover);
}

.more-dl-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.more-dl-card__cover {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--color-surface-2);
}

.more-dl-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 320ms var(--ease-out);
}

.more-dl-card:hover .more-dl-card__cover img { transform: scale(1.05); }

.more-dl-card__info {
  padding: 0.8rem 0.85rem 0.9rem;
  text-align: left;
}

.more-dl-card__info h4 {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0 0 0.2rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  transition: color var(--duration-fast);
}

.more-dl-card:hover .more-dl-card__info h4 { color: var(--color-accent); }

.more-dl-card__info p {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-text-3);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   BOOK LOADING STATE
   ============================================================ */
.book-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  min-height: 60vh;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--color-text-2);
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.book-loading__spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

/* ============================================================
   BOOK ERROR STATE
   ============================================================ */
.book-error {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  background: var(--color-bg);
}

.book-error__inner {
  text-align: center;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.book-error__icon {
  font-size: 3rem;
  color: var(--color-text-3);
}

.book-error__title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 0;
}

.book-error__msg {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text-2);
  margin: 0;
  line-height: 1.7;
}

/* ============================================================
   BREADCRUMB BAR (book.html)
   ============================================================ */
.breadcrumb-bar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0.9rem 0;
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  backdrop-filter: blur(8px);
  background: rgba(var(--color-surface-rgb, 255,255,255), 0.9);
}

.breadcrumb-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb-link:hover { text-decoration: underline; }

.breadcrumb-sep {
  color: var(--color-text-3);
  font-size: 0.75rem;
}

.breadcrumb-current {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

/* ============================================================
   RESPONSIVE — BOOKS PAGES
   ============================================================ */
@media (max-width: 1100px) {
  .book-detail__inner { grid-template-columns: 300px 1fr; }
}

@media (max-width: 900px) {
  .lib-hero { height: 72vh; min-height: 440px; }
  .more-downloads__grid { grid-template-columns: repeat(2, 1fr); }
  .book-detail__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .book-detail__cover-col {
    position: static;
    max-width: 300px;
    margin: 0 auto;
    padding-top: 0;
  }
}

@media (max-width: 620px) {
  .lib-hero { height: 65vh; min-height: 400px; }
  .lib-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .lib-filter-tab { font-size: 0.7rem; height: 34px; padding: 0 0.85rem; gap: 0.4em; }
  .lib-filter-tab__count {
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.25em;
    font-size: 0.72em;
  }
  .lib-search__kbd { display: none; }
  .more-downloads__grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .book-detail__actions { flex-direction: column; }
  .book-detail__actions .btn { width: 100%; justify-content: center; }
}

/* Touch devices — always show CTA on cards */
@media (hover: none) {
  .book-card__cta { opacity: 1; transform: none; }
}

   CORRECTIONS v1.1
   ============================================================ */

/* ── What We Do — Image ─────────────────────────────────── */
.ink-intro__image {
  position: relative;
}
.ink-intro__image-frame {
  position: relative;
  display: inline-block;
  width: 100%;
}
.ink-intro__image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--card-shadow);
}
.ink-intro__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}
.ink-intro__image-frame:hover .ink-intro__img {
  transform: scale(1.04);
}
/* Decorative offset accent block behind the image */
.ink-intro__image-accent {
  position: absolute;
  bottom: -14px;
  right: -14px;
  width: 60%;
  height: 60%;
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.45;
  transition: opacity var(--duration-base) ease;
}
.ink-intro__image-frame:hover .ink-intro__image-accent {
  opacity: 0.75;
}
@media (max-width: 860px) {
  .ink-intro__image-wrap { aspect-ratio: 16 / 9; }
  .ink-intro__image-accent { display: none; }
}

/* ── INKterlude Section — Image ─────────────────────────── */
.inkterlude-section__image {
  position: relative;
}
.inkterlude-section__image-frame {
  position: relative;
  width: 100%;
}
.inkterlude-section__image-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  box-shadow: var(--card-shadow);
  position: relative;
}
.inkterlude-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--duration-slow) var(--ease-out);
}

/* Graceful fallback if the event photo fails to load (e.g. file not
   yet uploaded, or a typo'd path) — shows a styled brand panel
   instead of a broken image icon. */
.inkterlude-section__image-fallback-text {
  display: none;
}
.inkterlude-section__image-wrap--fallback {
  background: linear-gradient(135deg, #1a1410, #3d2b1a);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inkterlude-section__image-wrap--fallback .inkterlude-section__image-fallback-text {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-style: italic;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.inkterlude-section__image-frame:hover .inkterlude-section__img {
  transform: scale(1.04);
}
/* Decorative offset accent — mirrors What We Do treatment */
.inkterlude-section__image-accent {
  position: absolute;
  top: -14px;
  left: -14px;
  width: 55%;
  height: 55%;
  border: 2px solid var(--color-accent);
  border-radius: 12px;
  z-index: -1;
  opacity: 0.4;
  transition: opacity var(--duration-base) ease;
}
.inkterlude-section__image-frame:hover .inkterlude-section__image-accent {
  opacity: 0.7;
}
@media (max-width: 860px) {
  .inkterlude-section__image-wrap { aspect-ratio: 16 / 9; }
  .inkterlude-section__image-accent { display: none; }
  .inkterlude-section__image { order: -1; }
}

/* ============================================================
   TESTIMONIALS SECTION
   ─────────────────────────────────────────────────────────────
   Full redesign for Batch 8. Premium 2026 editorial layout
   with a wide single-card carousel, oversized decorative
   quote glyph, rich card anatomy, and smooth infinite loop.
   ============================================================ */

/* ── Section shell ───────────────────────────────────────── */
.testimonials-section {
  padding: clamp(5rem, 10vw, 8rem) 0 clamp(4rem, 8vw, 6rem);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  position: relative;
}

/* Ambient ink-wash texture behind the carousel */
.testimonials-section::before {
  content: '"';
  position: absolute;
  top: -4rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(28rem, 50vw, 52rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.025;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Section header ──────────────────────────────────────── */
.testimonials-section__header {
  text-align: center;
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
  position: relative;
  z-index: 1;
}

.testimonials-section__heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  margin: 0.5rem 0 0;
  line-height: 1.15;
}

/* ── Carousel shell ──────────────────────────────────────── */
.testimonials-carousel {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  padding: 0 clamp(3.5rem, 7vw, 5.5rem);
}

.testimonials-viewport {
  overflow: hidden;
  border-radius: 16px;
  /* Subtle outer glow so the card floats above the section bg */
  box-shadow: 0 32px 80px rgba(16,15,13,0.10), 0 8px 24px rgba(16,15,13,0.06);
}

/* Sliding track */
.testimonials-track {
  display: flex;
  transition: transform 600ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
  cursor: grab;
}

.testimonials-track:active { cursor: grabbing; }
.testimonials-track.no-transition { transition: none !important; }

/* ── Individual card ─────────────────────────────────────── */
.testimonial-card {
  min-width: 100%;
  box-sizing: border-box;
  padding: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 5vw, 3.5rem) clamp(2rem, 4vw, 3rem);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: background-color var(--duration-slow),
              border-color     var(--duration-slow);
  /* Equal-height support: JS sets height; flex stretches content */
  align-items: stretch;
}

/* ── Decorative quote glyph ──────────────────────────────── */
.testimonial-card__mark {
  position: absolute;
  top: -2rem;
  left: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(8rem, 18vw, 14rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transition: opacity var(--duration-slow);
}

/* ── Five-star rating ────────────────────────────────────── */
.testimonial-card__rating {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 0.22em;
  color: var(--color-accent);
  font-size: 0.88rem;
}

/* ── Verified badge ──────────────────────────────────────── */
.testimonial-card .badge--verified {
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

/* ── Review title ────────────────────────────────────────── */
.testimonial-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.5vw, 1.55rem);
  font-weight: 600;
  font-style: normal;
  color: var(--color-heading);
  margin: 0;
  line-height: 1.35;
}

/* ── Review body ─────────────────────────────────────────── */
.testimonial-card__quote {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-text);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

/* ── Horizontal divider ──────────────────────────────────── */
.testimonial-card__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ── Author row ──────────────────────────────────────────── */
.testimonial-card__author {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: none;
  padding-top: 0;
}

.testimonial-card__avatar-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2.5px solid var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-bg);
  transition: box-shadow var(--duration-base);
}

.testimonial-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.testimonial-card__avatar-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  user-select: none;
}

.testimonial-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}

.testimonial-card__name {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-heading);
  line-height: 1.2;
}

.testimonial-card__role {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.testimonial-card__company {
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-3);
}

/* ── Card footer: badge + date ───────────────────────────── */
.testimonial-card__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.testimonial-card__date {
  font-family: var(--font-body);
  font-size: 0.7rem;
  color: var(--color-text-3);
  letter-spacing: 0.05em;
}

/* ── Prev / Next arrow buttons ───────────────────────────── */
.testimonials-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(16,15,13,0.10);
  transition: background   var(--duration-fast),
              border-color var(--duration-fast),
              color        var(--duration-fast),
              transform    var(--duration-fast),
              box-shadow   var(--duration-fast);
}

.testimonials-arrow--prev { left: 0; }
.testimonials-arrow--next { right: 0; }

.testimonials-arrow:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 12px 32px rgba(184,137,42,0.30);
}

.testimonials-arrow:active {
  transform: translateY(-50%) scale(0.96);
}

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

/* ── Dot navigation ──────────────────────────────────────── */
.testimonials-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 2.25rem;
}

.testimonials-dot {
  height: 8px;
  width: 8px;
  border-radius: 999px;
  border: none;
  background: var(--color-border);
  cursor: pointer;
  padding: 0;
  transition: background   var(--duration-base) var(--ease-out),
              width        var(--duration-base) var(--ease-out),
              opacity      var(--duration-base);
}

.testimonials-dot--active {
  background: var(--color-accent);
  width: 28px;
}

.testimonials-dot:hover:not(.testimonials-dot--active) {
  background: var(--color-accent-2);
  opacity: 0.7;
}

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

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .testimonials-carousel { padding: 0 3rem; }
  .testimonials-arrow { width: 44px; height: 44px; }
}

@media (max-width: 680px) {
  .testimonials-carousel { padding: 0 0.5rem; }
  .testimonial-card {
    padding: clamp(2rem, 6vw, 2.75rem) clamp(1.5rem, 5vw, 2rem);
    gap: 1.25rem;
  }
  .testimonials-arrow {
    width: 40px;
    height: 40px;
    font-size: 0.8rem;
    top: auto;
    bottom: 0.75rem;
    transform: none;
  }
  .testimonials-arrow:hover  { transform: scale(1.06); }
  .testimonials-arrow:active { transform: scale(0.96); }
  .testimonials-arrow--prev { left: 0.75rem; }
  .testimonials-arrow--next { right: 0.75rem; }
  .testimonials-section::before { opacity: 0.015; }
}

@media (max-width: 480px) {
  .testimonial-card__footer { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .testimonials-track          { transition: none !important; }
  .testimonials-section::before { display: none; }
  .testimonials-arrow          { transition: none; }
  .testimonials-dot            { transition: none; }
}

/* Members load more */
.member-card--hidden {
  display: none;
}

/* ============================================================
   FIXED BACK-TO-TOP BUTTON (global)
   ============================================================ */
.back-to-top-fixed {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  z-index: 500;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) ease,
              transform var(--duration-base) ease,
              background-color var(--duration-fast) ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  text-decoration: none;
}

.back-to-top-fixed.visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* ============================================================
   RESPONSIVE — download page
   ============================================================ */
@media (max-width: 860px) {
  .inkspired-intro__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

}

@media (max-width: 540px) {

  /* Single column — cards look identical to desktop: cover top, body below */

  .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) {

  /* Book card hover title colour — apply statically */
}

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

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

.not-found-code {
  font-family: var(--font-display);
  font-size: clamp(6rem, 16vw, 10rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--color-border);
  margin-bottom: 0;
  letter-spacing: -0.04em;
  /* 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: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  margin-bottom: 1rem;
}

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

.not-found-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   IMPROVEMENT 7 — Nav: aria-current active indicator
   ============================================================ */
nav a.active,
nav a[aria-current="page"] {
  font-weight: 500;
}

/* 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;
  }
}

/* ============================================================
   IMPROVEMENT 10 — Footer email capture
   ============================================================ */

.footer-email-input {
  flex: 1;
  padding: 0.7rem 1rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  outline: none;
  transition: border-color var(--duration-fast) ease,
              background-color var(--duration-base) ease;
  min-width: 0;
}

.footer-email-input:focus {
  border-color: var(--color-accent);
}

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

.footer-email-btn {
  padding: 0.7rem 1.4rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: var(--color-accent);
  border: 1.5px solid var(--color-accent);
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) ease,
              transform var(--duration-fast) ease;
}

.footer-email-btn:hover {
  background-color: var(--color-link-hover);
  border-color: var(--color-link-hover);
  transform: translateY(-1px);
}

.footer-email-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   FORM RESPONSE TOASTS (Batch 4, 2026)
   ─────────────────────────────────────────────────────────────
   Shared by .footer-email-msg / .newsletter-msg (newsletter
   signup) and .contact-form__feedback (contact form). Fixed
   position, bottom-center — because it's taken out of document
   flow, showing/hiding it never shifts surrounding layout, unlike
   an inline message. main.js's showToast() sets/clears the
   .success / .error modifier and auto-dismisses after 5s.
   ============================================================ */
.footer-email-msg,
.newsletter-msg,
.contact-form__feedback {
  position: fixed;
  left: 50%;
  bottom: 1.75rem;
  z-index: 5000;
  display: flex;
  align-items: center;
  gap: 0.65em;
  max-width: min(90vw, 420px);
  padding: 0.85em 1.15em;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--color-heading);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--card-shadow-hover);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
  transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
}
.footer-email-msg::before,
.newsletter-msg::before,
.contact-form__feedback::before {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 900 0.65rem "Font Awesome 6 Free";
  color: #fff;
}
.footer-email-msg.success,
.newsletter-msg.success,
.contact-form__feedback.success,
.footer-email-msg.error,
.newsletter-msg.error,
.contact-form__feedback.error {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.footer-email-msg.success::before,
.newsletter-msg.success::before,
.contact-form__feedback.success::before {
  content: "\f00c"; /* fa-check */
  background-color: #16a34a;
}
.footer-email-msg.error::before,
.newsletter-msg.error::before,
.contact-form__feedback.error::before {
  content: "\f00d"; /* fa-xmark */
  background-color: #dc2626;
}
@media (max-width: 560px) {
  .footer-email-msg,
  .newsletter-msg,
  .contact-form__feedback {
    bottom: 1rem;
    font-size: 0.8rem;
  }
}

/* ============================================================
   IMPROVEMENT 4 — About stats band (above bio section)
   ============================================================ */
.about-stats-band {
  background-color: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  padding: 2rem;
  transition: background-color var(--duration-slow) ease;
}

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

.about-stats-band .bio-fact {
  background-color: var(--color-surface);
  padding: 1.5rem 1rem;
  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)
   ============================================================ */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ── Skip to main content (keyboard accessibility) ────────── */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--color-accent);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top 0.2s;
}

.skip-to-content:focus {
  top: 0;
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/* ============================================================
   SEARCH — link-style button (for "clear the search")
   ============================================================ */
.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-btn:hover { color: var(--color-link-hover); }

/* ============================================================
   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: 99999;
  border-radius: 50%;
  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: 6px;
  height: 6px;
  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: 34px;
  height: 34px;
  border: 1.5px 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: 50px;
  height: 50px;
  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: 7px;
  height: 7px;
  margin-left: -3.5px;
  margin-top:  -3.5px;
}

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

.jb-cursor-dot--press {
  width: 5px;
  height: 5px;
  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);
}

/* ============================================================
   INKSPIREDNG REBUILD — NEW SECTIONS (v6)
   Community homepage, about, contact, gallery, popup
   ============================================================ */

/* ── 1. INK INTRO (What We Do — index.html) ─────────────────── */
.ink-intro {
  padding: var(--space-xl) 2rem;
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}
.ink-intro__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}
.ink-intro__body {
  color: var(--color-text-2);
  line-height: 1.8;
  margin-bottom: 2rem;
}
.ink-intro__image .portrait-frame {
  margin: 0 auto;
}
@media (max-width: 860px) {
  .ink-intro__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .ink-intro__image { order: -1; }
}

/* ── 2. MEMBERS / POETS GRID ─────────────────────────────────── */
.members-section {
  padding: var(--space-xl) 2rem;
  background-color: var(--color-surface-2);
  transition: background-color var(--duration-slow) ease;
}
.members-section--about { background-color: var(--color-bg); }
.members-section__header {
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  text-align: center;
}
.members-section__sub {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--color-text-3);
  letter-spacing: 0.08em;
  margin-top: 0.75rem;
}
.members-section__intro {
  max-width: 1200px;
  margin: 0 auto var(--space-md);
  padding: 0 2rem;
  color: var(--color-text-2);
  font-size: 0.95rem;
  text-align: center;
}
.members-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}
.members-load-more {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.members-load-more__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.members-load-more__btn i {
  font-size: 0.8em;
  transition: transform var(--duration-fast) ease;
}
.members-load-more__btn:hover i {
  transform: translateY(2px);
}
.member-card {
  background-color: var(--card-bg);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out),
              border-color var(--duration-base) ease,
              background-color var(--duration-slow) ease;
}
.member-card:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-6px);
  border-color: transparent;
}
.member-card__photo-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
}
.member-card__photo {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--duration-slow) var(--ease-out);
}
.member-card:hover .member-card__photo { transform: scale(1.04); }
.member-card__body {
  padding: 1.5rem;
  border-top: 1px solid var(--color-border);
}
.member-card__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.2rem;
}
.member-card__role {
  display: block;
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}
.member-card__bio {
  font-size: 0.87rem;
  color: var(--color-text-2);
  line-height: 1.6;
  margin-bottom: 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.member-card__social {
  display: flex;
  gap: 0.75rem;
}
.member-card__social a {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-2);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}
.member-card__social a:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

/* ── 3. INKTERLUDE EVENT SECTION (index.html) ───────────────── */
.inkterlude-section {
  padding: var(--space-xl) 2rem;
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
  border-top: 1px solid var(--color-border);
}
.inkterlude-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: center;
}
.inkterlude-section__heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.15;
  margin-bottom: 0.75rem;
  max-width: 100%;
  overflow-wrap: break-word;
}
.inkterlude-section__meta {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}
.inkterlude-section__meta span {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.inkterlude-section__meta-badge {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem 0.3rem 0.7rem;
}
.inkterlude-section__text p:not(.section-label) {
  color: var(--color-text-2);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.inkterlude-section__caption {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background-color: var(--color-surface-2);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 3px 3px 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--color-text-2);
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  transition: background-color var(--duration-slow) ease;
}
.inkterlude-section__caption i {
  color: var(--color-accent);
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
}
.inkterlude-section__cta {
  margin-top: 1.5rem;
}
@media (max-width: 860px) {
  .inkterlude-section__inner { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .inkterlude-section__image { order: -1; }
}
/* Belt-and-braces: the CTA's own min-content width (nowrap, per .btn)
   can still exceed very narrow columns (~320-340px phones) even after
   the grid-track fix above, since that fix only stops the *grid track*
   from being forced wide — it doesn't stop the button itself from
   overflowing its now-narrower column. Letting it wrap below 360px
   removes that last dependency on a single unbreakable line. */
@media (max-width: 360px) {
  .inkterlude-section__cta {
    white-space: normal;
    text-align: center;
  }
}

/* ── 5. NEWSLETTER SECTION ────────────────────────────────────── */
.newsletter-section {
  background-color: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) 2rem;
  text-align: center;
  transition: background-color var(--duration-slow) ease;
}
.newsletter-section__inner {
  max-width: 640px;
  margin: 0 auto;
}
.newsletter-section__heading {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.newsletter-section__sub {
  font-size: 0.9rem;
  color: var(--color-text-2);
  margin-bottom: 2rem;
  line-height: 1.7;
}
.newsletter-section__form {
  display: flex;
  gap: 0.5rem;
  max-width: 440px;
  margin: 0 auto 1rem;
}
.newsletter-input { flex: 1; }
@media (max-width: 520px) {
  .newsletter-section__form { flex-direction: column; }
}

/* ── 6. PHOTO GALLERY (about.html) ───────────────────────────── */
.photo-gallery {
  background-color: var(--color-surface-2);
  transition: background-color var(--duration-slow) ease;
}
.gallery-intro {
  text-align: center;
  padding: 0 2rem var(--space-md);
}
.gallery-intro__text {
  font-size: 0.9rem;
  color: var(--color-text-3);
  letter-spacing: 0.06em;
}
.gallery-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem var(--space-xl);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.gallery-item {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4/3;
  box-shadow: var(--card-shadow);
  transition: box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-base) var(--ease-out);
}
.gallery-item:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}
.gallery-item--wide {
  grid-column: span 2;
  aspect-ratio: 16/7;
}
.gallery-item__image-wrap {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
}
.gallery-item__image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}
.gallery-item:hover .gallery-item__image { transform: scale(1.05); }
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,8,5,0.8) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-base) ease;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }
.gallery-item__caption {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
}
@media (max-width: 768px) {
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-item--wide { grid-column: span 2; }
}
@media (max-width: 480px) {
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-item--wide { grid-column: span 1; aspect-ratio: 4/3; }
}

/* ── 7. CONTACT PAGE ──────────────────────────────────────────── */
.contact-section {
  padding: var(--space-xl) 2rem;
  background-color: var(--color-bg);
  transition: background-color var(--duration-slow) ease;
}
.contact-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 2.5rem;
  align-items: start;
}
.contact-form-col,
.contact-details-col {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  padding: 2.5rem;
  transition: background-color var(--duration-slow) ease,
              border-color var(--duration-slow) ease;
}
.contact-details-col {
  background-color: var(--color-surface-2);
}
.contact-form-col__heading {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 300;
  font-style: italic;
  color: var(--color-heading);
  line-height: 1.15;
  margin-bottom: 0.75rem;
}
.contact-form-col__sub {
  font-size: 0.9rem;
  color: var(--color-text-2);
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form__row { display: flex; gap: 1rem; }
.contact-form__row--half .contact-form__field { flex: 1; }
.contact-form__field { display: flex; flex-direction: column; flex: 1; }
.contact-form__label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-2);
  margin-bottom: 0.5rem;
}
.contact-form__input {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  outline: none;
  width: 100%;
  transition: border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              background-color var(--duration-base) ease;
  appearance: none;
}
.contact-form__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-bg);
}
.contact-form__input::placeholder { color: var(--color-text-3); }
.contact-form__textarea { resize: vertical; min-height: 140px; line-height: 1.7; }
.contact-form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239c9690' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  padding-right: 2.5rem;
  cursor: pointer;
}
.contact-form__submit { align-self: flex-start; }
/* .contact-form__feedback styling now lives in the shared
   FORM RESPONSE TOASTS block above (with .footer-email-msg /
   .newsletter-msg) — see that section. */

/* Details column */
.contact-details-col__heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 2rem;
}
.contact-details-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.contact-details-list__item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.contact-details-list__icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background-color: var(--color-accent-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 0.95rem;
  flex-shrink: 0;
  transition: background-color var(--duration-base) ease;
}
.contact-details-list__item:hover .contact-details-list__icon {
  background-color: var(--color-accent);
  color: #fff;
}
.contact-details-list__item strong {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: 0.2rem;
}
.contact-details-list__item p,
.contact-details-list__item a {
  font-size: 0.92rem;
  color: var(--color-text-2);
  text-decoration: none;
}
.contact-details-list__item a:hover { color: var(--color-accent); }
.contact-form__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-social-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1rem;
}
.contact-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--duration-fast) ease;
}
.contact-social-btn i {
  font-size: 1rem;
  color: var(--color-accent);
  transition: color var(--duration-fast) ease;
}
.contact-social-btn:hover,
.contact-social-btn:focus-visible {
  transform: translateY(-2px);
  color: #fff;
}
.contact-social-btn:hover i,
.contact-social-btn:focus-visible i { color: #fff; }
.contact-social-btn--x:hover           { background: #000; border-color: #000; }
.contact-social-btn--facebook:hover    { background: #1877f2; border-color: #1877f2; }
.contact-social-btn--instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  border-color: #d6249f;
}
.contact-social-btn--linkedin:hover    { background: #0a66c2; border-color: #0a66c2; }
.contact-social-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .contact-section__inner { grid-template-columns: 1fr; gap: 2rem; }
  .contact-form-col,
  .contact-details-col { padding: 1.75rem; }
}
@media (max-width: 520px) {
  .contact-form__row--half { flex-direction: column; }
}

/* ============================================================
   GALLERY LIGHTBOX
   ============================================================ */

/* Zoom hint that appears on hover */
.gallery-item__zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(10,8,5,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease,
              transform var(--duration-base) var(--ease-out);
}
.gallery-item:hover .gallery-item__zoom-hint {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
/* Make the gallery item show a pointer cursor */
.gallery-item {
  cursor: pointer;
}

/* Lightbox overlay */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) ease;
}
.gallery-lightbox.gallery-lightbox--open {
  opacity: 1;
  pointer-events: all;
}
.gallery-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 8, 5, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gallery-lightbox__stage {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 5rem;
  box-sizing: border-box;
}

/* Close button */
.gallery-lightbox__close {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
  z-index: 10;
}
.gallery-lightbox__close:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
}

/* Image container */
.gallery-lightbox__image-wrap {
  max-width: 90vw;
  max-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-lightbox__image {
  max-width: 90vw;
  max-height: 75vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 3px;
  display: block;
  transition: opacity var(--duration-base) ease;
}
.gallery-lightbox__image.loading { opacity: 0; }

/* Prev / Next nav */
.gallery-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
  z-index: 10;
}
.gallery-lightbox__nav--prev { left: 1.25rem; }
.gallery-lightbox__nav--next { right: 1.25rem; }
.gallery-lightbox__nav:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.45);
}
.gallery-lightbox__nav:disabled {
  opacity: 0.25;
  cursor: not-allowed;
}

/* Footer: caption + counter */
.gallery-lightbox__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.25rem 2rem;
  background: linear-gradient(to top, rgba(10,8,5,0.85) 0%, transparent 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  z-index: 10;
}
.gallery-lightbox__caption {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.8);
  flex: 1;
}
.gallery-lightbox__counter {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  white-space: nowrap;
}

@media (max-width: 600px) {
  .gallery-lightbox__stage { padding: 2rem 1rem; }
  .gallery-lightbox__nav--prev { left: 0.5rem; }
  .gallery-lightbox__nav--next { right: 0.5rem; }
}

/* ============================================================
   BOOK RATING WIDGET  (download.html only — see rating.js)
   ─────────────────────────────────────────────────────────────
   Live, Firebase-backed 5-star community rating. Sits in the
   cover column, between the cover image and the download badge.
   ============================================================ */
.book-rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  text-align: center;
  transition: background-color var(--duration-slow) ease,
              border-color var(--duration-slow) ease;
}

/* Star row */
.book-rating__stars {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.book-rating__star {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-border);     /* empty star */
  transition: color var(--duration-fast) ease,
              transform var(--duration-fast) var(--ease-out);
}

.book-rating__star:hover { transform: translateY(-1px) scale(1.08); }

/* Filled state (hover preview AND submitted rating both use this) */
.book-rating__star.is-filled,
.book-rating__star.is-hovered {
  color: var(--color-accent);
}

/* Once a rating is submitted, stars become inert display-only */
.book-rating--locked .book-rating__star {
  cursor: default;
}
.book-rating--locked .book-rating__star:hover {
  transform: none;
}

/* Summary line: average + count, OR "no ratings yet" */
.book-rating__summary {
  font-family: var(--font-body);
  font-size: 0.8rem;
  color: var(--color-text-2);
  letter-spacing: 0.02em;
}
.book-rating__summary strong {
  color: var(--color-heading);
  font-weight: 600;
}

/* "You rated this book X stars" confirmation line */
.book-rating__confirmation {
  font-family: var(--font-body);
  font-size: 0.72rem;
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

/* Subtle offline / Firebase-unreachable notice */
.book-rating__offline-note {
  font-family: var(--font-body);
  font-size: 0.68rem;
  color: var(--color-text-3);
  letter-spacing: 0.03em;
}
.book-rating__offline-note i { margin-right: 0.3rem; }

/* Loading skeleton state, shown briefly while Firebase responds */
.book-rating__summary.is-loading {
  color: var(--color-text-3);
}

/* ============================================================
   FEATURED BOOK BANNER (books.html)
   ============================================================ */
/* ── Featured Book widget (books.html) ───────────────────────
   Hidden by default in the HTML; books.js only reveals it when a
   book has `featured: true` in books-data.js, or (as a fallback)
   when the admin-configurable site_settings/general.featuredBookId
   points at a published book — see initFeaturedBookBanner(). */
.featured-book {
  max-width: 1100px;
  margin: 0 auto 2.5rem;
  padding: 0 2rem;
}

.featured-book__inner {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-accent);
  border-radius: 16px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
}

.featured-book__cover-wrap {
  aspect-ratio: 3/4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
  background: var(--color-surface);
}

.featured-book__cover-wrap img,
.featured-book__cover-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
  color: rgba(255,255,255,0.85);
  text-align: center;
}

.featured-book__cover-placeholder {
  background: linear-gradient(135deg, #1a1410, #3d2b1a);
}

.featured-book__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 600;
  color: var(--color-heading);
  margin: 0.25rem 0 0.35rem;
  line-height: 1.2;
}

.featured-book__author {
  font-size: 0.9rem;
  color: var(--color-text-2);
  margin-bottom: 0.75rem;
}

.featured-book__desc {
  font-size: 0.95rem;
  color: var(--color-text-2);
  line-height: 1.7;
  margin-bottom: 1.25rem;
  max-width: 60ch;
}

@media (max-width: 600px) {
  .featured-book__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .featured-book__cover-wrap {
    max-width: 180px;
    margin: 0 auto;
  }
  .featured-book__desc { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   REUSABLE BADGE COMPONENTS
   ─────────────────────────────────────────────────────────────
   Shared across testimonial cards and any other component that
   needs a small contextual label pill.

   Variants:
     .badge--verified   green tick — "Verified Attendee/Member"
     .badge--context    accent-tinted — event/role label
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  line-height: 1;
  white-space: nowrap;
}

.badge--verified {
  background-color: rgba(34, 197, 94, 0.12);
  color: #16a34a;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

[data-theme="dark"] .badge--verified {
  background-color: rgba(34, 197, 94, 0.15);
  color: #4ade80;
  border-color: rgba(34, 197, 94, 0.3);
}

.badge--context {
  background-color: rgba(var(--color-accent-rgb, 191,148,87), 0.12);
  color: var(--color-accent);
  border: 1px solid rgba(var(--color-accent-rgb, 191,148,87), 0.25);
}


/* ============================================================
   POPUPS (Batch 3, 2026)
   ─────────────────────────────────────────────────────────────
   Styles for the standalone popup.js: the INKterlude event
   popup (markup lives statically in each page) and the New Book
   Alert popup (markup is injected by popup.js itself). Kept in
   the main stylesheet per the refactor plan; popup.js stays a
   separate, unmodified script.

   NOTE: the source popup CSS referenced several design tokens
   that don't exist in this codebase (--radius-pill, --fw-*,
   --text-sm8/13/xs, --color-success). Rather than introduce a
   second, parallel token vocabulary, every such reference below
   was mapped to the literal values this site already uses for
   the same purpose (999px pills, 500/600 font-weights, the
   existing 0.65–0.9rem small-text sizes, and #16a34a — the same
   green already used by .badge--verified and the contact-form
   success state).
   ============================================================ */

/* ── 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: 4px;
  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: 3px;
  }
  .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: 6px;
  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: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  color: #fff;
}
.book-alert__badge--new {
  background: var(--color-accent);
}
.book-alert__badge--preorder {
  background: #0a66c2;
}
.book-alert__badge--free {
  background: #16a34a;
}
.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: 300;
  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: 0.7rem;
  font-weight: 500;
  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: 0.85rem;
  color: var(--color-text-2);
  line-height: 1.6;
  margin-bottom: 0.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.book-alert__publisher {
  font-family: var(--font-body);
  font-size: 0.7rem;
  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: 0.7rem;
  gap: 0.4rem;
}
.book-alert__dismiss {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  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);
}

/* Both popups already theme correctly via --color-surface, which
   is redefined for [data-theme="dark"] earlier in this file — no
   popup-specific dark-mode overrides needed. */