:root {
    --void: #000000;
    --onyx: #050403;
    --obsidian: #0F0D0A;
    --panel: #14110C;
    --gold: #FFD400;
    --gold-bright: #FFE875;
    --gold-deep: #B89200;
    --red: #E50914;
    --red-bright: #FF1F2E;
    --red-deep: #5A0A12;
    --teal: #1A4550;
    --cyan: #00FFE0;
    --bone: #F5EFD8;
    --bone-dim: #8C8775;
    --border: rgba(255,212,0,0.30);
    --border-dim: rgba(255,212,0,0.10);
    --border-red: rgba(229,9,20,0.35);
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  /* Smooth-scroll for in-page anchor jumps */
  html { scroll-behavior: smooth; }
  /* Sticky header is ~120px tall; offset anchor targets so they don't slide under it */
  [id="books"], [id="web-novels"], [id="services"], [id="gallery"], [id="newsletter"], [id="about"], [id="hero-slider"] {
    scroll-margin-top: 140px;
  }
  body {
    background: var(--void);
    color: var(--bone);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    min-height: 100vh;
  }

  /* ============ GLOBAL SCANLINES ============ */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,212,0,0.06) 2px, rgba(255,212,0,0.06) 3px);
    pointer-events: none; z-index: 1000; mix-blend-mode: overlay;
    animation: scanline-drift 8s linear infinite;
  }
  body::after {
    content: '';
    position: fixed; inset: 0;
    background:
      radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.7) 100%),
      repeating-linear-gradient(0deg, transparent 0, transparent 4px, rgba(229,9,20,0.025) 4px, rgba(229,9,20,0.025) 5px);
    pointer-events: none; z-index: 999;
    animation: scanline-drift-slow 14s linear infinite;
  }
  .crt-band {
    position: fixed; left: 0; right: 0; height: 120px;
    background: linear-gradient(180deg, transparent 0%, rgba(255,212,0,0.04) 35%, rgba(255,212,0,0.10) 50%, rgba(229,9,20,0.06) 60%, transparent 100%);
    pointer-events: none; z-index: 998; mix-blend-mode: screen;
    animation: crt-roll 10s linear infinite;
  }
  .static-burst {
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
    pointer-events: none; z-index: 1001; mix-blend-mode: screen;
    animation: static-burst 7s infinite;
  }

  /* ============ KEYFRAMES ============ */
  @keyframes scanline-drift { 0%{transform:translateY(0);} 100%{transform:translateY(3px);} }
  @keyframes scanline-drift-slow { 0%{transform:translateY(0);} 100%{transform:translateY(5px);} }
  @keyframes crt-roll { 0%{top:-120px;} 100%{top:100vh;} }
  @keyframes static-burst { 0%,95%,100%{opacity:0;} 96%,98%{opacity:0.15;} 97%{opacity:0.3;} }
  @keyframes glitch-clip-1 {
    0%,12%,27%,49%,67%,86%,100% { clip-path: inset(0); transform: translate(0); }
    8% { clip-path: inset(15% 0 70% 0); transform: translate(-5px, 2px); }
    10% { clip-path: inset(60% 0 10% 0); transform: translate(4px, -1px); }
    25% { clip-path: inset(40% 0 40% 0); transform: translate(-3px, 0); }
    45% { clip-path: inset(70% 0 5% 0); transform: translate(6px, 0); }
    47% { clip-path: inset(10% 0 75% 0); transform: translate(-4px, 0); }
    65% { clip-path: inset(25% 0 55% 0); transform: translate(3px, -2px); }
    82% { clip-path: inset(55% 0 25% 0); transform: translate(-5px, 1px); }
    84% { clip-path: inset(5% 0 85% 0); transform: translate(4px, 0); }
  }
  @keyframes glitch-clip-2 {
    0%,12%,27%,49%,67%,86%,100% { clip-path: inset(0); transform: translate(0); }
    8% { clip-path: inset(50% 0 30% 0); transform: translate(5px, -2px); }
    10% { clip-path: inset(10% 0 80% 0); transform: translate(-4px, 1px); }
    25% { clip-path: inset(30% 0 50% 0); transform: translate(3px, 0); }
    45% { clip-path: inset(0 0 70% 0); transform: translate(-6px, 0); }
    47% { clip-path: inset(75% 0 10% 0); transform: translate(4px, 0); }
    65% { clip-path: inset(55% 0 25% 0); transform: translate(-3px, 2px); }
    82% { clip-path: inset(25% 0 55% 0); transform: translate(5px, -1px); }
    84% { clip-path: inset(85% 0 5% 0); transform: translate(-4px, 0); }
  }
  @keyframes glitch-tear {
    0%, 100% { transform: translate(0); filter: none; }
    7% { transform: translate(-3px, 0) skewX(-2deg); filter: hue-rotate(-20deg); }
    8% { transform: translate(2px, -1px) skewX(1deg); }
    9% { transform: translate(0); filter: none; }
    44% { transform: translate(2px, 0) skewX(1deg); }
    45% { transform: translate(-2px, 1px); filter: hue-rotate(15deg); }
    46% { transform: translate(0); filter: none; }
    81% { transform: translate(-1px, 0) skewX(-1deg); }
    82% { transform: translate(2px, 0); filter: hue-rotate(-10deg); }
    83% { transform: translate(0); filter: none; }
  }
  @keyframes flicker { 0%,100%{opacity:1;} 10%,12%{opacity:0.7;} 11%{opacity:0.3;} 47%,49%{opacity:0.85;} 48%{opacity:0.4;} 73%{opacity:0.6;} }
  @keyframes red-pulse { 0%,90%,100%{box-shadow:0 0 0 transparent;} 93%{box-shadow:0 0 24px var(--red), 0 0 48px var(--red-deep);} 96%{box-shadow:0 0 0 transparent;} }
  @keyframes glitch-shift-fast { 0%,100%{transform:translate(0);} 20%{transform:translate(-3px,1px);} 40%{transform:translate(3px,-1px);} 60%{transform:translate(-2px,0);} 80%{transform:translate(2px,0);} }
  @keyframes cursor-blink { 0%,50%{opacity:1;} 51%,100%{opacity:0;} }
  @keyframes led-pulse { 0%,100%{box-shadow:0 0 4px var(--red), 0 0 8px var(--red);} 50%{box-shadow:0 0 8px var(--red-bright), 0 0 20px var(--red);} }

  /* ============ HEADER ============
   * Sticky on <header> alone fails because its direct parent (the
   * .wp-block-template-part wrapper div) is only as tall as the social bar
   * + header combined — once you scroll past that, sticky detaches.
   *
   * Fix: `display: contents` on the wrapper removes its box from layout,
   * so the social bar and <header> become direct children of
   * .wp-site-blocks (which spans the full document). The header can then
   * stick within the full page; the social bar (no sticky) scrolls away
   * naturally above it. */
  .wp-site-blocks > .wp-block-template-part:first-of-type {
    display: contents;
  }
  /* Compensate for the sticky header when jumping to in-page anchors so
   * headings don't slide behind it. */
  html { scroll-padding-top: 100px; }

  header {
    border-bottom: 1px solid var(--border);
    padding: 1.4rem 3rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(0,0,0,0.78));
    backdrop-filter: blur(10px);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  header::before {
    content: '';
    position: absolute; bottom: -3px; left: 50%; transform: translateX(-50%);
    width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
  }
  .header-inner { max-width: 1300px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
  .header-right { display: flex; align-items: center; gap: 2.5rem; }

  /* Header subscribe CTA — prominent, gold-bordered, glitches + glows on hover */
  .header-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.4rem;
    background: var(--void);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
    box-shadow: 0 0 16px rgba(255,212,0,0.15);
    animation: red-pulse 6s infinite;
    white-space: nowrap;
  }
  .header-cta::before { content: 'â—†'; color: var(--red); font-size: 0.6em; vertical-align: middle; text-shadow: 0 0 6px var(--red); }
  .header-cta:hover {
    background: var(--gold);
    color: var(--void);
    text-shadow: none;
    border-color: var(--gold-bright);
    box-shadow: 0 0 32px rgba(229,9,20,0.5);
    animation: glitch-shift-fast 0.4s;
    letter-spacing: 0.35em;
  }
  .header-cta:hover::before { color: var(--red-deep); }
  @media (max-width: 700px) {
    .header-cta { padding: 0.55rem 1rem; font-size: 0.7rem; letter-spacing: 0.2em; }
    .header-cta::before { display: none; }
  }
  .logo {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: var(--gold);
    position: relative;
    animation: flicker 6s infinite;
  }
  .logo img {
    height: 96px;
    width: auto;
    display: block;
    filter:
      drop-shadow(0 0 16px rgba(255,212,0,0.45))
      drop-shadow(0 0 32px rgba(229,9,20,0.3));
    transition: filter 0.3s, transform 0.3s;
  }
  .logo:hover img {
    filter:
      drop-shadow(0 0 24px rgba(255,212,0,0.8))
      drop-shadow(0 0 48px rgba(229,9,20,0.5));
    transform: rotate(-3deg) scale(1.05);
    animation: glitch-shift-fast 0.5s;
  }
  .logo-text {
    font-family: 'Forum', serif;
    font-size: 1.45rem;
    color: var(--gold);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(255,212,0,0.4);
    line-height: 1;
  }
  .logo-tagline {
    display: block;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--bone-dim);
    font-size: 0.78rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 0.5rem;
    text-shadow: 0 0 6px rgba(229,9,20,0.3);
  }
  @media (max-width: 700px) {
    .logo-text-wrap { display: none; }
    .logo img { height: 64px; }
  }

  /* Footer logo — smaller, centered */
  .footer-logo {
    display: inline-block;
    margin-bottom: 1.5rem;
  }
  .footer-logo img {
    height: 80px;
    width: auto;
    filter:
      drop-shadow(0 0 16px rgba(255,212,0,0.4))
      drop-shadow(0 0 32px rgba(229,9,20,0.3));
    transition: filter 0.3s, transform 0.3s;
  }
  .footer-logo:hover img {
    filter:
      drop-shadow(0 0 20px rgba(255,212,0,0.7))
      drop-shadow(0 0 48px rgba(229,9,20,0.5));
    transform: rotate(3deg);
  }
  nav ul { display: flex; gap: 2.5rem; list-style: none; }
  nav a {
    font-family: 'Inter', sans-serif; font-weight: 500; color: var(--bone);
    text-decoration: none; font-size: 0.78rem; letter-spacing: 0.3em;
    text-transform: uppercase; transition: all 0.2s; position: relative; padding: 0.4rem 0;
  }
  nav a::after {
    content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--red));
    transition: all 0.3s; transform: translateX(-50%);
  }
  nav a:hover { color: var(--gold); text-shadow: -2px 0 var(--red), 2px 0 var(--cyan); animation: glitch-shift-fast 0.4s; }
  nav a:hover::after { width: 100%; }

  /* ============ BLOCK: SOCIAL BAR (top of page, above header) ============ */
  .social-bar {
    background: var(--void);
    border-bottom: 1px solid var(--border-dim);
    padding: 0.6rem 3rem;
    text-align: center;
    position: relative;
    z-index: 60;
  }
  .social-bar::before {
    content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
    width: 240px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
    opacity: 0.5;
  }
  .social-list {
    display: flex; gap: 0.4rem; justify-content: center; flex-wrap: wrap;
    list-style: none; align-items: center;
  }
  .social-list a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--border-dim);
    text-decoration: none; font-size: 0.95rem;
    transition: all 0.2s; position: relative;
    text-shadow: 0 0 8px rgba(255,212,0,0.3);
  }
  .social-list a:hover {
    color: var(--bone);
    background: var(--obsidian);
    border-color: var(--red);
    text-shadow: -1.5px 0 var(--red), 1.5px 0 var(--cyan), 0 0 12px var(--gold);
    box-shadow: 0 0 16px rgba(229,9,20,0.3);
    animation: glitch-shift-fast 0.4s;
  }
  /* Tooltip on hover */
  .social-list a::after {
    content: attr(data-label);
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
    font-family: 'Forum', serif; font-size: 0.65rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--gold); white-space: nowrap;
    background: var(--void); border: 1px solid var(--gold); padding: 0.3rem 0.6rem;
    opacity: 0; pointer-events: none; transition: opacity 0.2s;
    z-index: 100;
  }
  .social-list a:hover::after { opacity: 1; }

  /* ============ HERO ============ */
  .hero { padding: 8rem 3rem 7rem; position: relative; overflow: hidden; border-bottom: 1px solid var(--border); background: var(--void); }
  .hero::before {
    content: ''; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    width: 1200px; height: 1200px;
    background: conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, transparent 5deg, rgba(255,212,0,0.1) 5deg, rgba(255,212,0,0.1) 6deg,
      transparent 6deg, transparent 15deg, rgba(229,9,20,0.07) 15deg, rgba(229,9,20,0.07) 16deg,
      transparent 16deg, transparent 25deg, rgba(255,212,0,0.1) 25deg, rgba(255,212,0,0.1) 26deg,
      transparent 26deg, transparent 35deg, rgba(229,9,20,0.05) 35deg, rgba(229,9,20,0.05) 36deg,
      transparent 36deg, transparent 45deg, rgba(255,212,0,0.09) 45deg, rgba(255,212,0,0.09) 46deg,
      transparent 46deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, black 0%, transparent 60%);
    mask: radial-gradient(circle at 50% 50%, black 0%, transparent 60%);
    pointer-events: none; opacity: 0.8;
  }
  .hero::after {
    content: ''; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 30%, rgba(255,212,0,0.08), transparent 50%),
      radial-gradient(ellipse at 30% 80%, rgba(229,9,20,0.06), transparent 60%);
    pointer-events: none;
  }
  .hero-frame { max-width: 900px; margin: 0 auto; text-align: center; position: relative; padding: 5rem 4rem; z-index: 2; }
  .hero-frame::before, .hero-frame::after, .deco-corner-tr, .deco-corner-bl {
    content: ''; position: absolute; width: 60px; height: 60px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 16px rgba(255,212,0,0.4), inset 0 0 8px rgba(229,9,20,0.2);
  }
  .hero-frame::before { top: 0; left: 0; border-right: none; border-bottom: none; }
  .hero-frame::after { bottom: 0; right: 0; border-left: none; border-top: none; }
  .deco-corner-tr { top: 0; right: 0; border-left: none; border-bottom: none; }
  .deco-corner-bl { bottom: 0; left: 0; border-right: none; border-top: none; }
  .deco-top, .deco-bottom {
    position: absolute; left: 80px; right: 80px; height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--red) 15%, var(--gold) 50%, var(--red) 85%, transparent 100%);
    opacity: 0.7;
  }
  .deco-top { top: 0; }
  .deco-bottom { bottom: 0; }
  .hero-eyebrow {
    font-family: 'Forum', serif; font-size: 0.85rem; letter-spacing: 0.7em;
    color: var(--gold); text-transform: uppercase; margin-bottom: 2rem;
    text-shadow: 0 0 12px rgba(255,212,0,0.5);
  }
  .hero-eyebrow::before, .hero-eyebrow::after { content: 'â—†'; color: var(--red); margin: 0 0.5rem; font-size: 0.7em; vertical-align: middle; text-shadow: 0 0 8px var(--red); }
  .hero h1 {
    font-family: 'Forum', serif; font-size: clamp(3rem, 9vw, 7rem);
    line-height: 0.95; color: var(--bone); margin-bottom: 1.8rem;
    letter-spacing: 0.08em; text-transform: uppercase; position: relative;
    display: inline-block;
    text-shadow: 0 0 30px rgba(255,212,0,0.25), 0 0 60px rgba(229,9,20,0.15);
    animation: glitch-tear 3s infinite;
  }
  .hero h1 .gold { color: var(--gold); text-shadow: 0 0 24px rgba(255,212,0,0.7), 0 0 48px rgba(229,9,20,0.3); }
  .hero h1::before, .hero h1::after {
    content: attr(data-text); position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; overflow: hidden; mix-blend-mode: screen;
  }
  .hero h1::before { color: var(--red); animation: glitch-clip-1 2.4s infinite linear; text-shadow: 0 0 20px var(--red); }
  .hero h1::after { color: var(--cyan); animation: glitch-clip-2 2.4s infinite linear; text-shadow: 0 0 20px var(--cyan); }
  .hero p {
    font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 1.4rem;
    color: var(--bone); max-width: 620px; margin: 0 auto 3rem; line-height: 1.6; opacity: 0.92;
  }
  .hero p::before { content: '\201C'; color: var(--gold); font-size: 1.5em; line-height: 0; vertical-align: -0.4em; margin: 0 0.3em; }
  .hero p::after { content: '\201D'; color: var(--gold); font-size: 1.5em; line-height: 0; vertical-align: -0.4em; margin: 0 0.3em; }
  .cta {
    display: inline-flex; align-items: center; gap: 1rem; padding: 1.1rem 3rem;
    background: var(--void); color: var(--gold); border: 1px solid var(--gold);
    font-family: 'Forum', serif; font-size: 0.95rem; letter-spacing: 0.4em;
    text-transform: uppercase; text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; position: relative;
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
    box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--gold), 0 0 24px rgba(255,212,0,0.25);
    animation: red-pulse 5s infinite;
  }
  .cta:hover { background: var(--gold); color: var(--void); text-shadow: none; letter-spacing: 0.5em; box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--red), 0 0 60px rgba(229,9,20,0.5); animation: glitch-shift-fast 0.3s; }
  .cta::before, .cta::after { content: 'â—†'; color: inherit; font-size: 0.7em; }

  /* ============ BLOCK: ABOUT MODAL (opens from nav) ============ */
  .about-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.94);
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(10px);
  }
  .about-modal.active { display: flex; animation: lightbox-fade 0.4s ease-out; }
  .about-modal::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,212,0,0.04) 2px, rgba(255,212,0,0.04) 3px);
    pointer-events: none;
    animation: scanline-drift 8s linear infinite;
  }
  .about-frame {
    position: relative;
    max-width: 1100px;
    max-height: 88vh;
    height: 700px;
    width: 100%;
    background: var(--obsidian);
    border: 1px solid var(--gold);
    box-shadow:
      0 0 0 4px var(--void),
      0 0 0 5px var(--gold),
      0 40px 80px rgba(229,9,20,0.3);
    display: grid;
    grid-template-columns: 5fr 7fr;
    grid-template-rows: 1fr;
    overflow: hidden;
  }
  @media (max-width: 900px) {
    .about-frame {
      grid-template-columns: 1fr;
      grid-template-rows: 320px 1fr;
      max-height: 92vh;
      height: 92vh;
      overflow: hidden;
    }
  }
  .about-frame::before, .about-frame::after {
    content: ''; position: absolute; width: 50px; height: 50px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 16px rgba(255,212,0,0.4);
    z-index: 10;
    pointer-events: none;
  }
  .about-frame::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
  .about-frame::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }

  .about-portrait {
    background: var(--void);
    background-image: url('assets/coda-portrait.png');
    background-size: cover;
    background-position: center top;
    min-height: 0;
    height: 100%;
    position: relative;
    border-right: 1px solid var(--border-dim);
  }
  @media (max-width: 900px) {
    .about-portrait { border-right: none; border-bottom: 1px solid var(--border-dim); }
  }
  /* Soft fade on right edge so portrait blends into the bio panel */
  .about-portrait::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, transparent 70%, rgba(15,13,10,0.6) 100%),
      repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
    pointer-events: none;
  }
  .about-portrait-fallback {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--bone-dim);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    text-align: center;
    padding: 2rem;
    z-index: 1;
  }
  .about-meta {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
    min-height: 0;
    position: relative;
  }
  @media (max-width: 900px) { .about-meta { padding: 2rem 1.8rem; } }
  .about-meta-head { flex-shrink: 0; }
  .about-meta-foot { flex-shrink: 0; }

  .about-eyebrow {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.5em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 6px rgba(229,9,20,0.4);
  }
  .about-eyebrow::before, .about-eyebrow::after { content: 'â—†'; color: var(--gold); margin: 0 0.5rem; font-size: 0.7em; vertical-align: middle; }

  .about-name {
    font-family: 'Forum', serif;
    font-size: 2.4rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 24px rgba(255,212,0,0.4);
    position: relative;
    display: inline-block;
    animation: glitch-tear 4s infinite;
  }
  .about-name::before, .about-name::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; mix-blend-mode: screen;
  }
  .about-name::before { color: var(--red); animation: glitch-clip-1 3s infinite linear; }
  .about-name::after { color: var(--cyan); animation: glitch-clip-2 3s infinite linear; }

  .about-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--bone-dim);
    font-size: 1.05rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
  }
  .about-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.4;
    margin: 1.2rem 0 1.5rem;
  }
  .about-bio {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem;
    color: var(--bone);
    line-height: 1.75;
    margin: 0;
    /* Only this scrolls */
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding-right: 1rem;
    margin-right: -0.5rem;
  }
  .about-bio p { margin-bottom: 1rem; }
  .about-bio p:last-child { margin-bottom: 0; }
  .about-bio em { color: var(--gold); font-style: italic; }
  .about-bio .accent { color: var(--gold); }
  /* Custom gold scrollbar for the bio area */
  .about-bio::-webkit-scrollbar { width: 6px; }
  .about-bio::-webkit-scrollbar-track { background: rgba(255,212,0,0.04); }
  .about-bio::-webkit-scrollbar-thumb {
    background: var(--gold);
    box-shadow: 0 0 6px rgba(255,212,0,0.5);
  }
  .about-bio::-webkit-scrollbar-thumb:hover { background: var(--red); box-shadow: 0 0 8px var(--red); }
  .about-bio { scrollbar-width: thin; scrollbar-color: var(--gold) rgba(255,212,0,0.04); }
  /* Subtle fade at the bottom edge to hint at scrollable content */
  .about-bio-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }
  .about-bio-wrap::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 12px;
    height: 28px;
    background: linear-gradient(180deg, transparent, var(--obsidian));
    pointer-events: none;
  }
  .about-handle {
    font-family: 'Forum', serif;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-dim);
    text-align: center;
  }
  .about-handle::before, .about-handle::after { content: 'â—†'; color: var(--red); margin: 0 0.6rem; font-size: 0.7em; vertical-align: middle; }
  .about-close {
    position: absolute; top: -1px; right: -1px;
    width: 48px; height: 48px;
    background: var(--void);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s;
  }
  .about-close:hover { background: var(--red); color: var(--bone); border-color: var(--red); text-shadow: 0 0 8px var(--red); }
  body.about-open { overflow: hidden; }

  /* ============ HERO WATERMARK (logo behind everything) ============ */
  .hero-watermark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 720px;
    max-width: 90vw;
    pointer-events: none;
    z-index: 1;
    opacity: 0.12;
    mix-blend-mode: screen;
    animation: watermark-rotate 90s linear infinite, watermark-pulse 8s ease-in-out infinite;
  }
  .hero-watermark img {
    width: 100%;
    height: auto;
    display: block;
    filter:
      drop-shadow(0 0 32px rgba(255,212,0,0.5))
      drop-shadow(0 0 64px rgba(229,9,20,0.3));
  }
  @keyframes watermark-rotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
  }
  @keyframes watermark-pulse {
    0%, 100% { opacity: 0.10; }
    50% { opacity: 0.16; }
  }
  /* Make sure hero-frame stays above the watermark */
  .hero-frame { position: relative; z-index: 2; }
  .hero-controls, .hero-progress { position: relative; z-index: 3; }

  /* ============ LIGHTBOX BRAND MARK (signature on the image) ============ */
  .lightbox-brand {
    position: absolute;
    top: 16px; left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    pointer-events: none;
  }
  .lightbox-brand img {
    height: 40px;
    width: auto;
    filter:
      drop-shadow(0 0 8px rgba(255,212,0,0.5))
      drop-shadow(0 0 16px rgba(229,9,20,0.3));
    opacity: 0.9;
  }
  .lightbox-brand-text {
    font-family: 'Forum', serif;
    font-size: 0.65rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255,212,0,0.5);
    background: rgba(0,0,0,0.6);
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-dim);
  }
  @media (max-width: 800px) {
    .lightbox-brand { top: 12px; }
    .lightbox-brand img { height: 32px; }
    .lightbox-brand-text { display: none; }
  }

  /* ============ HERO SLIDER ============ */
  /* Each slide overlays the same frame; only one is .active at a time */
  .hero-frame { min-height: 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .hero-content {
    position: absolute;
    top: 5rem; left: 4rem; right: 4rem; bottom: 5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
    transform: translateY(8px);
    pointer-events: none;
    text-align: center;
  }
  .hero-content.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  @media (max-width: 700px) {
    .hero-content { top: 3rem; left: 1.5rem; right: 1.5rem; bottom: 3rem; }
  }

  /* Slide-specific eyebrow color accent — distinguishes the 3 update types */
  .hero-content[data-slide="0"] .hero-eyebrow { color: var(--gold); }
  .hero-content[data-slide="0"] .hero-eyebrow::before, .hero-content[data-slide="0"] .hero-eyebrow::after { color: var(--red); }
  .hero-content[data-slide="1"] .hero-eyebrow { color: var(--red); text-shadow: 0 0 12px rgba(229,9,20,0.5); }
  .hero-content[data-slide="1"] .hero-eyebrow::before, .hero-content[data-slide="1"] .hero-eyebrow::after { color: var(--gold); }
  .hero-content[data-slide="2"] .hero-eyebrow { color: var(--cyan); text-shadow: 0 0 12px rgba(0,255,224,0.4); }
  .hero-content[data-slide="2"] .hero-eyebrow::before, .hero-content[data-slide="2"] .hero-eyebrow::after { color: var(--gold); }

  /* Hero slider controls — sit OUTSIDE the deco frame, below */
  .hero-controls {
    position: relative;
    z-index: 3;
    margin-top: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-arrow {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--void);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.3rem;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
  }
  .hero-arrow:hover {
    background: var(--red);
    color: var(--bone);
    border-color: var(--red);
    box-shadow: 0 0 24px rgba(229,9,20,0.5);
  }
  .hero-dots {
    display: flex;
    gap: 1rem;
    align-items: center;
  }
  .hero-dot {
    width: 12px; height: 12px;
    background: transparent;
    border: 1px solid var(--gold);
    cursor: pointer;
    transition: all 0.3s;
    transform: rotate(45deg);
    padding: 0;
    position: relative;
  }
  .hero-dot:hover { background: rgba(255,212,0,0.3); }
  .hero-dot.active {
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold), 0 0 24px rgba(229,9,20,0.4);
  }
  .hero-progress {
    height: 1px;
    background: var(--border-dim);
    margin: 1.5rem auto 0;
    max-width: 300px;
    position: relative;
    overflow: hidden;
  }
  .hero-progress-fill {
    position: absolute; top: 0; left: 0;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--red), var(--gold), var(--red));
    box-shadow: 0 0 8px var(--gold);
    transition: width 0.1s linear;
  }
  .hero.paused .hero-progress-fill { transition: none; }

  /* ============ SECTIONS GENERIC ============ */
  section { padding: 6rem 3rem; max-width: 1300px; margin: 0 auto; position: relative; }
  .section-header { text-align: center; margin-bottom: 4rem; }
  .section-title {
    font-family: 'Forum', serif; font-size: 2.4rem; color: var(--gold);
    margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.4em;
    text-shadow: 0 0 20px rgba(255,212,0,0.4), 0 0 40px rgba(229,9,20,0.15);
    display: inline-block;
  }
  .section-title::before, .section-title::after {
    content: ''; display: inline-block; width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
    vertical-align: middle; margin: 0 1.5rem;
  }
  .section-meta {
    font-family: 'Cormorant Garamond', serif; font-style: italic;
    color: var(--bone-dim); font-size: 1rem; letter-spacing: 0.2em;
  }

  /* ============ BOOKSHELF (SPINES) ============ */
  .bookshelf-wrap {
    position: relative;
    padding-bottom: 60px;
    perspective: 1200px;
  }
  .bookshelf {
    display: flex; align-items: flex-end; justify-content: center; gap: 6px;
    min-height: 440px; padding: 0 1rem;
  }
  .spine {
    position: relative;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
    color: var(--gold);
    font-family: 'Forum', serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 1.4rem 0.6rem;
    border-top: 3px double rgba(255,212,0,0.4);
    border-bottom: 3px double rgba(255,212,0,0.4);
    box-shadow: -2px 0 4px rgba(0,0,0,0.6), 2px 0 4px rgba(0,0,0,0.6), inset 0 0 24px rgba(0,0,0,0.5);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform-style: preserve-3d;
  }
  .spine::before {
    content: ''; position: absolute; top: 12px; bottom: 12px; left: 4px;
    width: 1px; background: rgba(255,212,0,0.3); writing-mode: horizontal-tb;
  }
  .spine::after {
    content: ''; position: absolute; top: 12px; bottom: 12px; right: 4px;
    width: 1px; background: rgba(255,212,0,0.3); writing-mode: horizontal-tb;
  }
  .spine:hover {
    transform: translateY(-24px);
    box-shadow:
      -4px 0 8px rgba(0,0,0,0.7),
      4px 0 8px rgba(0,0,0,0.7),
      0 -8px 32px rgba(255,212,0,0.4),
      0 -16px 48px rgba(229,9,20,0.25),
      inset 0 0 24px rgba(0,0,0,0.5);
  }
  .spine:hover .spine-title {
    text-shadow: -2px 0 var(--red), 2px 0 var(--cyan), 0 0 16px rgba(255,212,0,0.8);
    animation: glitch-shift-fast 0.4s;
  }
  .spine-title {
    font-size: 1rem;
    transition: text-shadow 0.3s;
  }
  .spine-author {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--bone-dim);
    text-transform: none;
  }
  .spine-ornament {
    writing-mode: horizontal-tb;
    color: var(--red);
    font-size: 0.6rem;
    letter-spacing: 0.4em;
    text-shadow: 0 0 6px rgba(229,9,20,0.4);
  }
  .spine.oxblood {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.5) 100%),
      linear-gradient(180deg, #5a0a12 0%, #2a0408 50%, #5a0a12 100%);
  }
  .spine.obsidian {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.6) 100%),
      linear-gradient(180deg, #14110C 0%, #0a0907 50%, #14110C 100%);
  }
  .spine.teal {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.5) 100%),
      linear-gradient(180deg, #1A4550 0%, #0a2028 50%, #1A4550 100%);
  }
  .spine.gold {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.4) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.4) 100%),
      linear-gradient(180deg, #5a4810 0%, #B89200 50%, #5a4810 100%);
    color: var(--void);
    border-top-color: rgba(0,0,0,0.4);
    border-bottom-color: rgba(0,0,0,0.4);
  }
  .spine.gold .spine-author { color: rgba(0,0,0,0.7); }
  .spine.gold .spine-ornament { color: var(--red-deep); text-shadow: none; }
  .spine.charcoal {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.6) 100%),
      linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 50%, #1a1a1a 100%);
    color: var(--red-bright);
  }
  .spine.charcoal .spine-author { color: var(--bone-dim); }
  .shelf-base {
    position: absolute;
    bottom: 30px; left: 0; right: 0;
    height: 30px;
    background:
      linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    box-shadow:
      inset 0 8px 16px rgba(0,0,0,0.8),
      0 0 32px rgba(255,212,0,0.15);
  }
  .shelf-base::before {
    content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
    opacity: 0.5;
  }
  .shelf-base::after {
    content: 'â—†        â—†        â—†        â—†        â—†';
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: var(--gold); font-size: 0.6rem; letter-spacing: 0.4em;
    text-shadow: 0 0 6px rgba(255,212,0,0.5);
  }

  /* ============ CRT MONITOR / WEB NOVELS ============ */
  .crt-section { padding: 6rem 3rem; max-width: 1300px; margin: 0 auto; }
  .crt-monitor {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    background: linear-gradient(180deg, #2a2722 0%, #14110C 50%, #1a1714 100%);
    padding: 32px 32px 80px;
    border-radius: 24px;
    box-shadow:
      0 0 0 2px var(--gold),
      0 0 0 4px var(--void),
      0 0 0 5px rgba(255,212,0,0.5),
      0 40px 80px rgba(0,0,0,0.9),
      0 0 60px rgba(255,212,0,0.15);
  }
  /* Bezel screws / ornaments */
  .crt-monitor::before, .crt-monitor::after {
    content: ''; position: absolute; width: 12px; height: 12px;
    background: radial-gradient(circle, var(--gold) 30%, var(--gold-deep) 60%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(255,212,0,0.5);
  }
  .crt-monitor::before { top: 12px; left: 12px; }
  .crt-monitor::after { top: 12px; right: 12px; }
  .crt-screw-bl, .crt-screw-br {
    position: absolute; width: 12px; height: 12px;
    background: radial-gradient(circle, var(--gold) 30%, var(--gold-deep) 60%, transparent 70%);
    border-radius: 50%; box-shadow: 0 0 6px rgba(255,212,0,0.5);
  }
  .crt-screw-bl { bottom: 12px; left: 12px; }
  .crt-screw-br { bottom: 12px; right: 12px; }

  .crt-screen {
    background:
      radial-gradient(ellipse at 50% 50%, #0a1208 0%, #050805 50%, #020401 100%);
    border-radius: 12px;
    padding: 2.5rem 3rem;
    min-height: 460px;
    position: relative;
    overflow: hidden;
    font-family: 'VT323', monospace;
    font-size: 1.25rem;
    color: var(--gold);
    line-height: 1.5;
    text-shadow: 0 0 8px rgba(255,212,0,0.6);
    box-shadow:
      inset 0 0 80px rgba(0,0,0,0.9),
      inset 0 0 24px rgba(255,212,0,0.1);
  }
  /* CRT inner scanlines (denser inside the screen) */
  .crt-screen::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(0,0,0,0.4) 2px, rgba(0,0,0,0.4) 3px);
    pointer-events: none;
    border-radius: 12px;
  }
  /* CRT glow + curvature illusion */
  .crt-screen::after {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
    border-radius: 12px;
  }

  .crt-prompt {
    color: var(--red-bright);
    text-shadow: 0 0 8px rgba(229,9,20,0.7);
    margin-bottom: 1.5rem;
    position: relative; z-index: 2;
  }
  .crt-prompt .user { color: var(--gold); }
  .crt-prompt .path { color: var(--bone); }
  .crt-list { position: relative; z-index: 2; }
  .crt-row {
    display: grid;
    grid-template-columns: 24px 1fr 100px 110px 130px;
    gap: 1rem;
    padding: 0.5rem 0;
    transition: background 0.2s;
    align-items: center;
  }
  .crt-row:hover { background: rgba(255,212,0,0.08); }
  .crt-status {
    text-align: center;
    text-shadow: 0 0 8px currentColor;
  }
  .crt-status.ongoing { color: var(--gold); }
  .crt-status.hiatus { color: var(--red-bright); }
  .crt-status.complete { color: #6ED49A; }
  .crt-title { color: var(--bone); text-shadow: 0 0 6px rgba(245,239,216,0.4); cursor: pointer; }
  .crt-title:hover { color: var(--gold); text-shadow: -1.5px 0 var(--red), 1.5px 0 var(--cyan), 0 0 8px var(--gold); }
  .crt-tag { color: var(--gold); font-size: 0.95rem; opacity: 0.9; }
  .crt-meta { color: var(--bone-dim); font-size: 0.95rem; }
  .crt-state {
    text-align: right;
    color: var(--gold);
    letter-spacing: 0.1em;
  }
  .crt-state.hiatus { color: var(--red-bright); }
  .crt-state.complete { color: #6ED49A; }
  .crt-cursor {
    color: var(--gold);
    animation: cursor-blink 1s steps(2) infinite;
    font-weight: bold;
  }
  .crt-led {
    position: absolute;
    bottom: 30px;
    right: 60px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--red);
    animation: led-pulse 2s infinite;
  }
  .crt-brand {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Forum', serif;
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
    opacity: 0.85;
  }
  .crt-brand::before, .crt-brand::after { content: 'â—†'; color: var(--red); margin: 0 0.5rem; font-size: 0.7em; vertical-align: middle; }

  /* ============ SERVICES ============ */
  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
  }
  .service-card {
    background: var(--obsidian);
    border: 1px solid var(--border-dim);
    padding: 0;
    position: relative;
    transition: all 0.4s;
  }
  .service-card::before {
    content: '';
    position: absolute; inset: 8px;
    border: 1px solid rgba(255,212,0,0.15);
    pointer-events: none;
    z-index: 2;
  }
  .service-card:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow:
      0 0 0 1px var(--gold),
      0 16px 40px rgba(0,0,0,0.8),
      0 0 60px rgba(229,9,20,0.2);
  }
  .service-icon-area {
    position: relative;
    aspect-ratio: 4/3;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(255,212,0,0.18), transparent 60%),
      linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
    display: flex; align-items: center; justify-content: center;
    border-bottom: 1px solid var(--border-dim);
    overflow: hidden;
  }
  .service-icon-area::before {
    content: ''; position: absolute; inset: 0;
    background: conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, rgba(229,9,20,0.08) 60deg, transparent 120deg,
      rgba(255,212,0,0.08) 180deg, transparent 240deg, rgba(229,9,20,0.08) 300deg, transparent 360deg);
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
    mask: radial-gradient(circle at 50% 50%, black 0%, transparent 70%);
  }
  .service-icon {
    font-family: 'Forum', serif;
    font-size: 4rem;
    color: var(--gold);
    text-shadow:
      0 0 24px rgba(255,212,0,0.6),
      0 0 48px rgba(229,9,20,0.3);
    position: relative; z-index: 2;
  }
  .service-card:hover .service-icon {
    animation: glitch-shift-fast 0.5s;
    text-shadow: -3px 0 var(--red), 3px 0 var(--cyan), 0 0 32px rgba(255,212,0,0.8);
  }
  .service-meta { padding: 2rem 1.8rem; position: relative; z-index: 3; }
  .service-eyebrow {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 6px rgba(229,9,20,0.4);
  }
  .service-eyebrow::before { content: 'â—† '; }
  .service-title {
    font-family: 'Forum', serif;
    font-size: 1.5rem;
    color: var(--gold);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 0 12px rgba(255,212,0,0.3);
  }
  .service-desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--bone-dim);
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  .service-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.8rem;
    background: transparent;
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s;
  }
  .service-btn::after { content: '→'; }
  .service-btn:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--bone);
    box-shadow: 0 0 20px rgba(229,9,20,0.4);
    letter-spacing: 0.35em;
  }

  /* ============ GALLERY (TABBED MASONRY) ============ */
  /* Self-contained: this whole .gallery section can be lifted onto a /gallery page */
  .gallery { padding: 6rem 3rem; max-width: 1300px; margin: 0 auto; position: relative; }
  .gallery-tabs {
    display: flex;
    gap: 0;
    justify-content: center;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    position: relative;
  }
  .gallery-tabs::before {
    content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
    width: 80%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.4;
  }
  .gallery-tab {
    font-family: 'Forum', serif;
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--bone-dim);
    background: transparent;
    border: 1px solid var(--border-dim);
    border-bottom: none;
    padding: 1rem 2rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    margin: 0 -0.5px;
  }
  .gallery-tab::before {
    content: 'â—†';
    color: var(--red);
    margin-right: 0.6rem;
    font-size: 0.6em;
    vertical-align: middle;
    opacity: 0.5;
    transition: all 0.3s;
  }
  .gallery-tab:hover {
    color: var(--gold);
    border-color: var(--gold);
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
  }
  .gallery-tab:hover::before { opacity: 1; }
  .gallery-tab.active {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--obsidian);
    box-shadow:
      inset 0 8px 24px rgba(255,212,0,0.08),
      0 0 24px rgba(255,212,0,0.15);
    text-shadow: 0 0 12px rgba(255,212,0,0.5);
  }
  .gallery-tab.active::before { color: var(--gold); opacity: 1; text-shadow: 0 0 6px var(--gold); }

  .gallery-panel { display: none; }
  .gallery-panel.active { display: block; animation: panel-fade 0.4s ease-out; }
  @keyframes panel-fade {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  .masonry {
    columns: 3;
    column-gap: 1.5rem;
  }
  @media (max-width: 900px) { .masonry { columns: 2; } }
  @media (max-width: 600px) { .masonry { columns: 1; } }

  .gallery-item {
    break-inside: avoid;
    margin: 0 0 1.5rem;
    background: var(--obsidian);
    border: 1px solid var(--border-dim);
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    display: block;
  }
  .gallery-item::before {
    content: '';
    position: absolute; inset: 6px;
    border: 1px solid rgba(255,212,0,0.10);
    pointer-events: none;
    z-index: 3;
    transition: border-color 0.3s;
  }
  .gallery-item:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow:
      0 0 0 1px var(--gold),
      0 16px 36px rgba(0,0,0,0.8),
      0 0 40px rgba(229,9,20,0.2);
  }
  .gallery-item:hover::before { border-color: rgba(229,9,20,0.4); }
  .gallery-item:hover .gallery-title {
    text-shadow: -2px 0 var(--red), 2px 0 var(--cyan), 0 0 12px rgba(255,212,0,0.6);
    animation: glitch-shift-fast 0.4s;
  }

  .gallery-image {
    aspect-ratio: var(--ratio, 1/1);
    background: var(--obsidian);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-family: 'Forum', serif;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    text-align: center;
    padding: 1.5rem;
    text-shadow: 0 0 12px rgba(255,212,0,0.4);
    border-bottom: 1px solid var(--border-dim);
    position: relative;
    overflow: hidden;
  }
  .gallery-image::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg,
      transparent 0, transparent 3px,
      rgba(0,0,0,0.15) 3px, rgba(0,0,0,0.15) 4px);
    pointer-events: none;
  }
  /* Variant gradients for image placeholders */
  .gallery-image.v1 { background: radial-gradient(ellipse at 30% 30%, rgba(229,9,20,0.25), transparent 60%), linear-gradient(135deg, var(--obsidian), var(--void)); }
  .gallery-image.v2 { background: radial-gradient(ellipse at 70% 50%, rgba(255,212,0,0.25), transparent 60%), linear-gradient(180deg, var(--obsidian), #1a0508); }
  .gallery-image.v3 { background: radial-gradient(ellipse at 50% 80%, rgba(0,255,224,0.18), transparent 60%), linear-gradient(135deg, #050810, var(--void)); }
  .gallery-image.v4 { background: linear-gradient(180deg, #2a0a14 0%, var(--void) 100%), radial-gradient(circle at 50% 30%, rgba(255,212,0,0.2), transparent 60%); }
  .gallery-image.v5 { background: linear-gradient(45deg, var(--obsidian) 0%, #1a0a0a 50%, var(--void) 100%), radial-gradient(ellipse at 20% 80%, rgba(229,9,20,0.2), transparent 60%); }
  .gallery-image.v6 { background: radial-gradient(ellipse at 50% 50%, rgba(255,212,0,0.15) 0%, transparent 60%), linear-gradient(180deg, #14110C, var(--void)); }
  .gallery-image.v7 { background: linear-gradient(135deg, #1a0508 0%, var(--obsidian) 50%, var(--void) 100%); }
  .gallery-image.v8 { background: radial-gradient(ellipse at 80% 20%, rgba(229,9,20,0.3), transparent 50%), radial-gradient(ellipse at 20% 80%, rgba(255,212,0,0.2), transparent 50%), var(--void); }

  .gallery-image-label {
    position: relative;
    z-index: 2;
    padding: 0.5rem 1rem;
  }
  .gallery-image-label::before, .gallery-image-label::after {
    content: 'â—†'; color: var(--red); margin: 0 0.4rem; font-size: 0.6em; vertical-align: middle;
  }

  .gallery-meta { padding: 1.2rem 1.4rem; position: relative; z-index: 4; }
  .gallery-tag {
    font-family: 'Forum', serif;
    font-size: 0.65rem;
    letter-spacing: 0.4em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    text-shadow: 0 0 4px rgba(229,9,20,0.4);
  }
  .gallery-title {
    font-family: 'Forum', serif;
    font-size: 1.1rem;
    color: var(--gold);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: text-shadow 0.3s;
  }
  .gallery-caption {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--bone-dim);
    line-height: 1.5;
  }

  /* ===== Gallery: filter chips (Art Commissions only) ===== */
  .gallery-chips {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 2.5rem;
  }
  .gallery-chip {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--bone-dim);
    background: transparent;
    border: 1px solid var(--border-dim);
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    transition: all 0.2s;
  }
  .gallery-chip::before { content: 'â—†'; color: var(--red); font-size: 0.5em; vertical-align: middle; margin-right: 0.4rem; opacity: 0.4; transition: opacity 0.2s; }
  .gallery-chip:hover {
    color: var(--gold);
    border-color: var(--gold);
    text-shadow: 0 0 6px rgba(255,212,0,0.4);
  }
  .gallery-chip:hover::before { opacity: 0.8; }
  .gallery-chip.active {
    color: var(--void);
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 12px rgba(255,212,0,0.4);
  }
  .gallery-chip.active::before { color: var(--red); opacity: 1; text-shadow: 0 0 4px var(--red); }
  .gallery-item.filtered-out { display: none; }

  /* ===== Gallery: pagination arrows + show-more ===== */
  .gallery-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 3rem;
  }
  .gallery-arrow {
    width: 48px; height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--void);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s;
    text-shadow: 0 0 8px rgba(255,212,0,0.4);
  }
  .gallery-arrow:hover:not(:disabled) {
    background: var(--red);
    color: var(--bone);
    border-color: var(--red);
    box-shadow: 0 0 24px rgba(229,9,20,0.5);
  }
  .gallery-arrow:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    border-color: var(--border-dim);
    color: var(--bone-dim);
    text-shadow: none;
  }
  .gallery-page-indicator {
    font-family: 'Forum', serif;
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(255,212,0,0.3);
    min-width: 90px;
    text-align: center;
  }
  .gallery-page-indicator span { color: var(--red); margin: 0 0.4rem; }
  .gallery-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-family: 'Forum', serif;
    color: var(--gold);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    padding: 0.7rem 1.6rem;
    border: 1px solid var(--gold);
    transition: all 0.3s;
    text-shadow: 0 0 8px rgba(255,212,0,0.3);
    margin-left: 1rem;
  }
  .gallery-view-all::after { content: '→'; }
  .gallery-view-all:hover {
    background: var(--red);
    color: var(--bone);
    border-color: var(--red);
    box-shadow: 0 0 24px rgba(229,9,20,0.4);
    letter-spacing: 0.45em;
  }
  .gallery-item.page-hidden { display: none; }

  /* ============ BLOCK: LIGHTBOX (gallery item enlarge) ============ */
  .lightbox {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.94);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    backdrop-filter: blur(8px);
  }
  .lightbox.active { display: flex; animation: lightbox-fade 0.3s ease-out; }
  @keyframes lightbox-fade {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  .lightbox::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,212,0,0.04) 2px, rgba(255,212,0,0.04) 3px);
    pointer-events: none;
    animation: scanline-drift 8s linear infinite;
  }
  .lightbox-frame {
    position: relative;
    max-width: 1100px;
    max-height: 90vh;
    width: 100%;
    background: var(--obsidian);
    border: 1px solid var(--gold);
    box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--gold), 0 40px 80px rgba(229,9,20,0.3);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0;
    overflow: hidden;
  }
  @media (max-width: 800px) {
    .lightbox-frame { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; }
  }
  .lightbox-frame::before, .lightbox-frame::after {
    content: ''; position: absolute; width: 40px; height: 40px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 16px rgba(255,212,0,0.4);
    z-index: 10;
  }
  .lightbox-frame::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
  .lightbox-frame::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
  .lightbox-image {
    min-height: 400px;
    background: var(--void);
    display: flex; align-items: center; justify-content: center;
    color: var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 3rem;
    text-shadow: 0 0 16px rgba(255,212,0,0.5);
    position: relative;
  }
  .lightbox-image::after {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px);
    pointer-events: none;
  }
  .lightbox-meta {
    padding: 3rem 2rem;
    background: var(--obsidian);
    border-left: 1px solid var(--border-dim);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .lightbox-tag {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 6px rgba(229,9,20,0.4);
  }
  .lightbox-tag::before { content: 'â—† '; color: var(--gold); }
  .lightbox-title {
    font-family: 'Forum', serif;
    font-size: 1.6rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 1.2rem;
    text-shadow: 0 0 16px rgba(255,212,0,0.4);
  }
  .lightbox-desc {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--bone);
    line-height: 1.6;
    margin-bottom: 1.5rem;
  }
  .lightbox-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0.4;
    margin: 1rem 0;
  }
  .lightbox-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Forum', serif;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    border: 1px solid var(--gold);
    padding: 0.7rem 1.4rem;
    transition: all 0.2s;
    align-self: flex-start;
  }
  .lightbox-cta::after { content: '→'; }
  .lightbox-cta:hover {
    background: var(--red); color: var(--bone); border-color: var(--red);
    box-shadow: 0 0 16px rgba(229,9,20,0.4);
  }
  .lightbox-close {
    position: absolute; top: -1px; right: -1px;
    width: 48px; height: 48px;
    background: var(--void);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s;
  }
  .lightbox-close:hover {
    background: var(--red); color: var(--bone); border-color: var(--red);
    text-shadow: 0 0 8px var(--red);
  }
  .lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 48px; height: 48px;
    background: var(--void);
    border: 1px solid var(--gold);
    color: var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.4rem;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
  }
  .lightbox-nav.prev { left: -56px; }
  .lightbox-nav.next { right: -56px; }
  @media (max-width: 1200px) {
    .lightbox-nav.prev { left: 8px; }
    .lightbox-nav.next { right: 8px; }
  }
  .lightbox-nav:hover { background: var(--red); color: var(--bone); border-color: var(--red); }
  body.lightbox-open { overflow: hidden; }

  /* ============ NEWSLETTER CALLOUT ============ */
  .newsletter {
    margin: 6rem 3rem;
    max-width: 1100px;
    margin-left: auto; margin-right: auto;
    background:
      radial-gradient(ellipse at 50% 50%, rgba(229,9,20,0.08), transparent 60%),
      linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
    border: 1px solid var(--gold);
    padding: 5rem 3rem;
    position: relative;
    overflow: hidden;
    text-align: center;
  }
  .newsletter::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background:
      conic-gradient(from 0deg at 50% 50%,
        transparent 0deg, rgba(255,212,0,0.04) 30deg, transparent 60deg,
        rgba(229,9,20,0.03) 120deg, transparent 180deg,
        rgba(255,212,0,0.04) 240deg, transparent 300deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, black 20%, transparent 70%);
    mask: radial-gradient(circle at 50% 50%, black 20%, transparent 70%);
    pointer-events: none;
  }
  .newsletter-corner {
    position: absolute; width: 50px; height: 50px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 16px rgba(255,212,0,0.4), inset 0 0 8px rgba(229,9,20,0.2);
  }
  .newsletter-corner.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
  .newsletter-corner.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
  .newsletter-corner.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
  .newsletter-corner.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
  .newsletter-content { position: relative; z-index: 2; }
  .newsletter-eyebrow {
    font-family: 'Forum', serif;
    font-size: 0.85rem;
    letter-spacing: 0.6em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 8px rgba(229,9,20,0.4);
  }
  .newsletter-eyebrow::before, .newsletter-eyebrow::after {
    content: 'â—†'; color: var(--gold); margin: 0 0.6rem; font-size: 0.7em; vertical-align: middle;
  }
  .newsletter h2 {
    font-family: 'Forum', serif;
    font-size: clamp(2rem, 5vw, 3.4rem);
    color: var(--bone);
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    position: relative;
    display: inline-block;
    text-shadow: 0 0 30px rgba(255,212,0,0.3);
    animation: glitch-tear 4s infinite;
  }
  .newsletter h2 .accent { color: var(--gold); text-shadow: 0 0 24px rgba(255,212,0,0.7); }
  .newsletter h2::before, .newsletter h2::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; mix-blend-mode: screen;
  }
  .newsletter h2::before { color: var(--red); animation: glitch-clip-1 3s infinite linear; }
  .newsletter h2::after { color: var(--cyan); animation: glitch-clip-2 3s infinite linear; }
  .newsletter p {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--bone);
    max-width: 600px;
    margin: 0 auto 2.5rem;
    opacity: 0.92;
  }
  .newsletter-form {
    display: flex;
    gap: 0.5rem;
    max-width: 540px;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
  }
  .newsletter-input {
    flex: 1 1 280px;
    background: var(--void);
    border: 1px solid var(--gold);
    padding: 1rem 1.4rem;
    color: var(--bone);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
    outline: none;
    transition: all 0.3s;
  }
  .newsletter-input::placeholder { color: var(--bone-dim); }
  .newsletter-input:focus {
    border-color: var(--red);
    box-shadow: 0 0 20px rgba(229,9,20,0.3);
    background: rgba(20,17,12,0.6);
  }
  .newsletter-submit {
    background: var(--gold);
    color: var(--void);
    border: 1px solid var(--gold);
    padding: 1rem 2.2rem;
    font-family: 'Forum', serif;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s;
  }
  .newsletter-submit:hover {
    background: var(--red);
    border-color: var(--red);
    color: var(--bone);
    box-shadow: 0 0 24px rgba(229,9,20,0.5);
  }
  .newsletter-fine {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--bone-dim);
    text-transform: uppercase;
    margin-top: 2rem;
  }
  .newsletter-fine::before { content: 'â—† '; color: var(--red); }
  .newsletter-fine::after { content: ' â—†'; color: var(--red); }

  /* ============ FOOTER ============ */
  footer {
    border-top: 1px solid var(--border); padding: 4rem 3rem 3rem;
    text-align: center; color: var(--bone-dim); font-size: 0.85rem;
    margin-top: 5rem; background: var(--void); position: relative;
  }
  footer::before {
    content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 300px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--red), var(--gold), var(--red), transparent);
    box-shadow: 0 0 8px var(--gold);
  }
  footer .ornament { color: var(--gold); font-size: 1rem; letter-spacing: 0.8em; margin-bottom: 2rem; text-shadow: 0 0 12px rgba(255,212,0,0.5); }
  footer .ornament span:nth-child(2) { color: var(--red); text-shadow: 0 0 12px rgba(229,9,20,0.5); }
  footer .links { display: flex; gap: 3rem; justify-content: center; margin-bottom: 2rem; flex-wrap: wrap; }
  footer a { font-family: 'Forum', serif; color: var(--gold); text-decoration: none; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.4em; transition: all 0.2s; }
  footer a:hover { color: var(--bone); text-shadow: -2px 0 var(--red), 2px 0 var(--cyan), 0 0 12px var(--gold); animation: glitch-shift-fast 0.4s; }
  footer .copy { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.95rem; color: var(--bone-dim); margin-top: 1rem; letter-spacing: 0.05em; }
  footer .theme-name { font-family: 'Forum', serif; color: var(--gold); letter-spacing: 0.4em; text-transform: uppercase; font-size: 0.7rem; margin-top: 0.5rem; }

  @media (max-width: 700px) {
    .header-inner { flex-direction: column; gap: 1rem; }
    .hero-frame { padding: 3rem 1.5rem; }
    .crt-row { grid-template-columns: 24px 1fr; gap: 0.6rem; }
    .crt-tag, .crt-meta, .crt-state { grid-column: 2; font-size: 0.85rem; }
    .bookshelf { gap: 4px; flex-wrap: wrap; min-height: auto; }
    .spine { min-height: 320px; }
  }

  /* =========================================================
   * v0.7.0 — additional in-page anchors
   * Generic scroll-offset so any :target lands clear of the
   * sticky social bar + header (~140 px combined). Applies to
   * built-in section IDs and per-content anchors alike.
   * ========================================================= */
  :target,
  .ht-anchor,
  [id^="book-"],
  [id^="webnovel-"],
  [id^="service-"],
  [id="footer"],
  [id="hero"],
  [id="top"] {
    scroll-margin-top: 140px;
  }
  /* Visually inert anchor markers (used at the top of the hero
   * to expose #hero and #top without altering layout). */
  .ht-anchor {
    display: block;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

/* =========================================================
 * v0.8.0 — Book Modal · Back-to-Top · Book single sections
 * Imported from theme-mockups/16-book-modal-spa.html
 * ========================================================= */
/* ============ BLOCK: BOOK MODAL (SPA-style overlay) ============ */
  .book-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.96);
    z-index: 2100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 2rem;
    backdrop-filter: blur(12px);
  }
  .book-modal.active { display: flex; animation: lightbox-fade 0.4s ease-out; }
  .book-modal::before {
    content: '';
    position: fixed; inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,212,0,0.04) 2px, rgba(255,212,0,0.04) 3px);
    pointer-events: none;
    animation: scanline-drift 8s linear infinite;
    z-index: 0;
  }
  .book-modal-frame {
    position: relative;
    max-width: 1300px;
    width: 100%;
    max-height: calc(100vh - 6rem);
    background: var(--void);
    border: 1px solid var(--gold);
    box-shadow:
      0 0 0 4px var(--void),
      0 0 0 5px var(--gold),
      0 40px 80px rgba(229,9,20,0.3),
      0 0 120px rgba(255,212,0,0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .book-modal-frame::before, .book-modal-frame::after {
    content: ''; position: absolute; width: 50px; height: 50px;
    border: 2px solid var(--gold);
    box-shadow: 0 0 16px rgba(255,212,0,0.4);
    z-index: 10;
    pointer-events: none;
  }
  .book-modal-frame::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
  .book-modal-frame::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }
  .book-modal-body {
    overflow-y: auto;
    flex: 1 1 auto;
    /* Custom gold scrollbar matching the about-modal pattern */
    scrollbar-width: thin;
    scrollbar-color: var(--gold) rgba(255,212,0,0.04);
  }
  .book-modal-body::-webkit-scrollbar { width: 8px; }
  .book-modal-body::-webkit-scrollbar-track { background: rgba(255,212,0,0.04); }
  .book-modal-body::-webkit-scrollbar-thumb { background: var(--gold); box-shadow: 0 0 6px rgba(255,212,0,0.5); }
  .book-modal-body::-webkit-scrollbar-thumb:hover { background: var(--red); }

  /* Top bar with breadcrumb + close button, pinned inside the modal */
  .book-modal-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.4rem 0.9rem 5rem;
    background: linear-gradient(180deg, rgba(0,0,0,0.96), rgba(0,0,0,0.7));
    border-bottom: 1px solid var(--border-dim);
    backdrop-filter: blur(8px);
  }
  .book-modal-breadcrumb {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.4em;
    color: var(--bone-dim);
    text-transform: uppercase;
  }
  .book-modal-breadcrumb a { color: var(--gold); text-decoration: none; }
  .book-modal-breadcrumb a:hover { color: var(--red); }
  .book-modal-breadcrumb span { color: var(--bone); }
  .book-modal-close {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--void);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 4rem;
  }
  .book-modal-close:hover {
    background: var(--red);
    color: var(--bone);
    border-color: var(--red);
    box-shadow: 0 0 16px rgba(229,9,20,0.5);
  }
  body.book-modal-open { overflow: hidden; }

  @media (max-width: 700px) {
    .book-modal { padding: 1rem; }
    .book-modal-frame { max-height: calc(100vh - 2rem); }
    .book-modal-topbar { padding-left: 4rem; }
    .book-modal-close { margin-right: 3rem; }
  }

  /* ============ Book content styles (used inside the modal) ============ */
  .book-hero {
    padding: 5rem 3rem 4rem;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--void);
  }
  .book-hero::before {
    content: '';
    position: absolute;
    top: -200px; left: 50%; transform: translateX(-50%);
    width: 1200px; height: 1200px;
    background: conic-gradient(from 0deg at 50% 50%,
      transparent 0deg, transparent 5deg, rgba(255,212,0,0.08) 5deg, rgba(255,212,0,0.08) 6deg,
      transparent 6deg, transparent 15deg, rgba(229,9,20,0.06) 15deg, rgba(229,9,20,0.06) 16deg,
      transparent 16deg, transparent 25deg, rgba(255,212,0,0.08) 25deg, rgba(255,212,0,0.08) 26deg,
      transparent 26deg, transparent 35deg, rgba(229,9,20,0.05) 35deg, rgba(229,9,20,0.05) 36deg,
      transparent 36deg, transparent 45deg, rgba(255,212,0,0.07) 45deg, rgba(255,212,0,0.07) 46deg,
      transparent 46deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, black 0%, transparent 60%);
    mask: radial-gradient(circle at 50% 50%, black 0%, transparent 60%);
    pointer-events: none; opacity: 0.7;
  }
  .book-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 4rem;
    align-items: start;
    position: relative;
    z-index: 2;
  }
  @media (max-width: 900px) {
    .book-hero { padding: 3rem 1.5rem 2.5rem; }
    .book-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  }
  .book-cover-wrap {
    position: relative;
    aspect-ratio: 2/3;
    background: var(--obsidian);
    border: 1px solid var(--gold);
    box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--gold), 0 24px 60px rgba(0,0,0,0.8), 0 0 80px rgba(229,9,20,0.2);
  }
  .book-cover-wrap::before, .book-cover-wrap::after {
    content: ''; position: absolute; width: 36px; height: 36px;
    border: 2px solid var(--gold); z-index: 10;
    box-shadow: 0 0 10px rgba(255,212,0,0.4);
  }
  .book-cover-wrap::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
  .book-cover-wrap::after  { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.premium-banner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: block;
  background: linear-gradient(180deg, rgba(122,16,24,0.96) 0%, rgba(91,14,18,0.96) 100%);
  color: #C9A227;
  font-family: 'Cinzel', 'Palatino Linotype', Georgia, serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  padding: 9px 48px;
  border-bottom: 1px solid rgba(201,162,39,0.55);
  box-shadow: 0 3px 12px rgba(0,0,0,0.55);
  pointer-events: none;
}
  .book-cover-art {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, #5a0a12 0%, #1a0508 60%, var(--void) 100%),
      radial-gradient(ellipse at 50% 30%, rgba(255,212,0,0.25), transparent 60%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.5rem; text-align: center;
  }
  .cover-series-mark {
    font-family: 'Forum', serif;
    font-size: 0.6rem;
    letter-spacing: 0.5em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 8px rgba(255,212,0,0.5);
  }
  .cover-title {
    font-family: 'Forum', serif;
    font-size: 2.6rem;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-shadow: 0 0 24px rgba(255,212,0,0.6), 0 0 48px rgba(229,9,20,0.3);
    line-height: 1;
  }
  .cover-author {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--bone);
    margin-top: 1.5rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .ku-badge {
    position: absolute; top: 0.8rem; right: 0.8rem;
    background: var(--gold); color: var(--void);
    font-family: 'Forum', serif;
    font-size: 0.6rem; letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 0.4rem 0.7rem;
    z-index: 11;
    box-shadow: 0 0 14px rgba(255,212,0,0.6);
  }
  .ku-badge::before { content: 'â—† '; color: var(--red-deep); }

  .book-meta-col { padding-top: 0.5rem; }
  .book-series-mark {
    font-family: 'Forum', serif;
    font-size: 0.75rem;
    letter-spacing: 0.4em;
    color: var(--red);
    text-transform: uppercase;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 6px rgba(229,9,20,0.5);
  }
  .book-series-mark::before { content: 'â—† '; color: var(--gold); }
  .book-series-mark a { color: var(--red); text-decoration: none; }
  .book-title {
    font-family: 'Forum', serif;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1;
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 32px rgba(255,212,0,0.4), 0 0 64px rgba(229,9,20,0.2);
    position: relative;
    display: inline-block;
    animation: glitch-tear 3s infinite;
  }
  .book-title::before, .book-title::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; mix-blend-mode: screen;
  }
  .book-title::before { color: var(--red); animation: glitch-clip-1 2.4s infinite linear; }
  .book-title::after  { color: var(--cyan); animation: glitch-clip-2 2.4s infinite linear; }
  .book-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.25rem;
    color: var(--bone);
    margin-bottom: 1.6rem;
    opacity: 0.92;
  }
  .book-subtitle::before, .book-subtitle::after {
    color: var(--gold); font-size: 1.3em; line-height: 0; vertical-align: -0.4em; margin: 0 0.25em;
  }
  .book-subtitle::before { content: '\201C'; }
  .book-subtitle::after  { content: '\201D'; }
  .book-detail-row {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem; letter-spacing: 0.25em;
    color: var(--bone-dim); text-transform: uppercase;
    margin-bottom: 2rem;
    padding: 0.8rem 0;
    border-top: 1px solid var(--border-dim);
    border-bottom: 1px solid var(--border-dim);
  }
  .book-detail-row strong { color: var(--gold); font-weight: 600; margin-right: 0.4em; }
  .book-buy-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.8rem; }
  .buy-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 1.3rem;
    background: var(--void); color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 0.75rem; letter-spacing: 0.3em;
    text-transform: uppercase; text-decoration: none;
    transition: all 0.3s;
    text-shadow: 0 0 6px rgba(255,212,0,0.3);
  }
  .buy-btn::before { content: 'â—†'; color: var(--red); font-size: 0.55em; }
  .buy-btn:hover {
    background: var(--gold); color: var(--void); text-shadow: none;
    box-shadow: 0 0 20px rgba(255,212,0,0.5);
    animation: glitch-shift-fast 0.4s;
  }
  .buy-btn:hover::before { color: var(--red-deep); }

  /* v0.9 — Download Free (reader-magnet primary CTA).
     Inverts the .buy-btn pattern: filled on rest to draw the eye,
     brighter glow on hover. Used when download_url is set on a book. */
  .buy-btn-download {
    background: var(--gold);
    color: var(--void);
    border-color: var(--gold-bright);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255,212,0,0.35);
    box-shadow: 0 0 14px rgba(255,212,0,0.35);
  }
  .buy-btn-download::before { content: '⬇'; color: var(--red-deep); }
  .buy-btn-download:hover {
    background: var(--gold-bright);
    color: var(--void);
    box-shadow: 0 0 28px rgba(255,212,0,0.7), 0 0 48px rgba(229,9,20,0.25);
  }
  .buy-btn-download:hover::before { color: var(--red); }
  .book-find-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
    margin: 0 0 2rem;
  }
  .book-find-label {
    font-family: 'Forum', serif;
    font-size: 0.7rem; letter-spacing: 0.4em;
    color: var(--bone-dim); text-transform: uppercase;
    margin-right: 0.4rem;
  }
  .find-btn {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    background: transparent; color: var(--bone);
    border: 1px solid var(--border-dim);
    font-family: 'Forum', serif;
    font-size: 0.7rem; letter-spacing: 0.25em;
    text-transform: uppercase; text-decoration: none;
    transition: all 0.25s;
  }
  .find-btn::before { content: 'â—†'; color: var(--red); font-size: 0.55em; }
  .find-btn:hover {
    color: var(--gold); border-color: var(--gold);
    background: rgba(255,212,0,0.05);
    text-shadow: 0 0 6px rgba(255,212,0,0.3);
  }
  .find-btn:hover::before { color: var(--gold); }
  .book-blurb {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem; line-height: 1.8;
    color: var(--bone);
    margin-bottom: 1.5rem;
  }
  .book-blurb p { margin-bottom: 1rem; }

  /* Collapsible content warnings */
  .content-warnings {
    border: 1px solid var(--red);
    background: rgba(90,10,18,0.18);
    margin: 0 0 1rem 0;
  }
  .content-warnings summary {
    cursor: pointer; list-style: none;
    padding: 0.85rem 1.1rem;
    display: flex; align-items: center; gap: 0.7rem;
    font-family: 'Forum', serif;
    font-size: 0.75rem; letter-spacing: 0.3em;
    text-transform: uppercase; color: var(--red-bright);
    text-shadow: 0 0 8px rgba(229,9,20,0.4);
    transition: background 0.2s;
  }
  .content-warnings summary::-webkit-details-marker { display: none; }
  .content-warnings summary::before { content: 'â—†'; color: var(--red); font-size: 0.65em; text-shadow: 0 0 4px var(--red); }
  .content-warnings summary::after  { content: 'â–¸'; margin-left: auto; color: var(--gold); font-size: 0.9em; transition: transform 0.25s; }
  .content-warnings[open] summary::after { transform: rotate(90deg); }
  .content-warnings summary:hover { background: rgba(229,9,20,0.08); }
  .cw-count {
    font-family: 'Inter', sans-serif;
    color: var(--bone-dim);
    font-size: 0.65rem; letter-spacing: 0.2em;
    margin-left: 0.4rem; text-shadow: none;
  }
  .cw-body { padding: 0 1.1rem 1rem; border-top: 1px dashed rgba(229,9,20,0.3); }
  .cw-intro {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; color: var(--bone-dim);
    font-size: 0.9rem; margin: 0.9rem 0 1rem;
    line-height: 1.5;
  }
  .cw-list { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
  .cw-list li {
    font-family: 'Forum', serif;
    font-size: 0.65rem; letter-spacing: 0.25em;
    text-transform: uppercase; color: var(--bone);
    background: rgba(0,0,0,0.4); border: 1px solid var(--red-deep);
    padding: 0.35rem 0.65rem;
  }
  .cw-list li::before { content: 'â—† '; color: var(--red); font-size: 0.8em; }
  .cw-graphic li { border-color: var(--red); color: var(--red-bright); }

  /* Excerpt */
  .book-excerpt-section { padding: 4rem 3rem; max-width: 760px; margin: 0 auto; position: relative; }
  .book-excerpt-section::before {
    content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
  }
  .book-excerpt-eyebrow {
    text-align: center; font-family: 'Forum', serif;
    font-size: 0.7rem; letter-spacing: 0.5em;
    color: var(--red); text-transform: uppercase;
    margin-bottom: 1rem;
  }
  .book-excerpt-eyebrow::before, .book-excerpt-eyebrow::after { content: 'â—†'; color: var(--gold); margin: 0 0.6rem; font-size: 0.7em; vertical-align: middle; }
  .book-excerpt-title {
    font-family: 'Forum', serif; text-align: center;
    color: var(--gold); font-size: 1.8rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    margin-bottom: 2.5rem; text-shadow: 0 0 16px rgba(255,212,0,0.3);
  }
  .book-excerpt-body { font-family: 'Cormorant Garamond', serif; font-size: 1.12rem; line-height: 1.8; color: var(--bone); }
  .book-excerpt-body p { margin-bottom: 1.4rem; }
  .book-excerpt-body p:first-child::first-letter {
    font-family: 'Forum', serif; font-size: 3.8rem;
    float: left; line-height: 0.85;
    margin: 0.4rem 0.5rem 0 0;
    color: var(--gold); text-shadow: 0 0 12px rgba(255,212,0,0.5);
  }
  .book-excerpt-fade { position: relative; margin-top: 2rem; padding-top: 2.5rem; text-align: center; }
  .book-excerpt-fade::before {
    content: ''; position: absolute; top: -40px; left: 0; right: 0; height: 40px;
    background: linear-gradient(180deg, transparent, var(--void));
    pointer-events: none;
  }

  /* More in this series (mini shelf) */
  .more-series-section { padding: 4rem 3rem; max-width: 1300px; margin: 0 auto; }
  .series-spine-row {
    display: flex; gap: 12px; align-items: flex-end; justify-content: center;
    margin-top: 2.5rem; min-height: 420px;
    position: relative; padding-bottom: 60px;
  }
  .more-spine {
    position: relative; cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s;
    color: var(--gold);
    font-family: 'Forum', serif;
    text-transform: uppercase; letter-spacing: 0.15em;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between;
    padding: 1.4rem 0.6rem;
    border-top: 3px double rgba(255,212,0,0.4);
    border-bottom: 3px double rgba(255,212,0,0.4);
    box-shadow: -2px 0 4px rgba(0,0,0,0.6), 2px 0 4px rgba(0,0,0,0.6), inset 0 0 24px rgba(0,0,0,0.5);
    writing-mode: vertical-rl; text-orientation: mixed;
    text-decoration: none;
  }
  .more-spine:hover { transform: translateY(-24px); }
  .more-spine.current {
    border-color: var(--red);
    box-shadow: -2px 0 4px rgba(0,0,0,0.6), 2px 0 4px rgba(0,0,0,0.6), inset 0 0 24px rgba(0,0,0,0.5), 0 0 32px rgba(229,9,20,0.4);
    cursor: default;
  }
  .more-spine.current:hover { transform: none; }
  .more-spine.current::after {
    content: 'YOU ARE HERE'; position: absolute;
    bottom: -32px; left: 50%; transform: translateX(-50%);
    writing-mode: horizontal-tb;
    font-family: 'Forum', serif;
    font-size: 0.6rem; letter-spacing: 0.3em;
    color: var(--red); text-shadow: 0 0 6px rgba(229,9,20,0.4);
    white-space: nowrap;
  }
  .more-spine.oxblood {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.5) 100%),
      linear-gradient(180deg, #5a0a12 0%, #2a0408 50%, #5a0a12 100%);
  }
  .more-spine.obsidian {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.6) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.6) 100%),
      linear-gradient(180deg, #14110C 0%, #0a0907 50%, #14110C 100%);
  }
  .more-spine.teal {
    background:
      linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 10%, transparent 90%, rgba(0,0,0,0.5) 100%),
      linear-gradient(180deg, #1A4550 0%, #0a2028 50%, #1A4550 100%);
  }
  .more-spine-title { font-size: 0.95rem; }
  .more-spine-author { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.65rem; letter-spacing: 0.2em; color: var(--bone-dim); text-transform: none; }
  .more-spine-ornament { writing-mode: horizontal-tb; color: var(--red); font-size: 0.55rem; letter-spacing: 0.4em; }
  .series-shelf-base {
    position: absolute; bottom: 30px; left: 0; right: 0; height: 30px;
    background: linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%);
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    box-shadow: inset 0 8px 16px rgba(0,0,0,0.8), 0 0 32px rgba(255,212,0,0.15);
  }

  /* Also by Coda (cross-promo grid) */
  .also-by-section { padding: 4rem 3rem; max-width: 1300px; margin: 0 auto; }
  .also-by-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-top: 2.5rem;
  }
  .also-by-card {
    background: var(--obsidian);
    border: 1px solid var(--border-dim);
    transition: all 0.3s;
    text-decoration: none;
    display: block;
    position: relative;
  }
  .also-by-card::before {
    content: ''; position: absolute; inset: 6px;
    border: 1px solid rgba(255,212,0,0.10);
    pointer-events: none; z-index: 3;
    transition: border-color 0.3s;
  }
  .also-by-card:hover {
    border-color: var(--gold);
    transform: translateY(-6px);
    box-shadow: 0 0 0 1px var(--gold), 0 16px 40px rgba(0,0,0,0.8), 0 0 50px rgba(229,9,20,0.2);
  }
  .also-by-card:hover::before { border-color: rgba(229,9,20,0.35); }
  .also-by-card:hover .ab-title {
    text-shadow: -2px 0 var(--red), 2px 0 var(--cyan), 0 0 12px rgba(255,212,0,0.6);
    animation: glitch-shift-fast 0.4s;
  }
  .also-by-cover {
    aspect-ratio: 2/3;
    background:
      linear-gradient(180deg, var(--obsidian) 0%, var(--void) 100%),
      radial-gradient(ellipse at 50% 30%, rgba(255,212,0,0.18), transparent 60%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    padding: 1.4rem;
    border-bottom: 1px solid var(--border-dim);
    color: var(--gold);
    font-family: 'Forum', serif;
    text-transform: uppercase; letter-spacing: 0.12em;
    text-shadow: 0 0 14px rgba(255,212,0,0.4);
    position: relative;
  }
  .also-by-cover::before { content: 'â—† â—†'; font-size: 0.45rem; letter-spacing: 0.5em; color: var(--red); margin-bottom: 0.8rem; }
  .also-by-cover::after  { content: 'â—† â—†'; font-size: 0.45rem; letter-spacing: 0.5em; color: var(--red); margin-top: 0.8rem; }
  .also-by-cover-title { font-size: 0.95rem; }
  .ab-meta { padding: 1.2rem 1.2rem 1.4rem; position: relative; z-index: 4; }
  .ab-tag { font-family: 'Forum', serif; font-size: 0.6rem; letter-spacing: 0.35em; color: var(--red); text-transform: uppercase; margin-bottom: 0.4rem; }
  .ab-tag::before { content: 'â—† '; color: var(--gold); }
  .ab-title { font-family: 'Forum', serif; font-size: 1rem; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.35rem; transition: text-shadow 0.3s; }
  .ab-tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.9rem; color: var(--bone-dim); line-height: 1.5; }

  /* ============ BACK TO TOP — floating arrow, bottom-right ============ */
  .back-to-top {
    position: fixed;
    bottom: 2rem; right: 2rem;
    width: 52px; height: 52px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--void);
    color: var(--gold);
    border: 1px solid var(--gold);
    font-family: 'Forum', serif;
    font-size: 1.5rem;
    cursor: pointer;
    text-decoration: none;
    z-index: 1500;
    transition:
      opacity 0.3s,
      visibility 0.3s,
      transform 0.3s cubic-bezier(0.4,0,0.2,1),
      background 0.2s,
      color 0.2s,
      box-shadow 0.2s;
    box-shadow:
      0 0 0 4px var(--void),
      0 0 0 5px var(--gold),
      0 0 20px rgba(255,212,0,0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    animation: btt-pulse 5s infinite;
  }
  .back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .back-to-top:hover {
    background: var(--gold);
    color: var(--void);
    box-shadow:
      0 0 0 4px var(--void),
      0 0 0 5px var(--red),
      0 0 32px rgba(229,9,20,0.6);
    animation: glitch-shift-fast 0.4s, btt-pulse 5s infinite;
  }
  @keyframes btt-pulse {
    0%, 90%, 100% { box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--gold), 0 0 20px rgba(255,212,0,0.3); }
    93%           { box-shadow: 0 0 0 4px var(--void), 0 0 0 5px var(--gold), 0 0 32px rgba(229,9,20,0.5); }
  }
  @media (max-width: 700px) {
    .back-to-top { bottom: 1.2rem; right: 1.2rem; width: 44px; height: 44px; font-size: 1.2rem; }
  }

  
/* =========================================================
 * v0.9.0 — author byline on book hero
 * ========================================================= */
.book-byline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.2rem;
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  background: rgba(15, 13, 10, 0.5);
  border: 1px solid var(--border-dim);
  text-decoration: none;
  transition: all 0.25s;
}
.book-byline:hover {
  border-color: var(--gold);
  background: rgba(255,212,0,0.05);
  box-shadow: 0 0 12px rgba(255,212,0,0.2);
}
.book-byline-portrait {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gold);
  box-shadow: 0 0 8px rgba(255,212,0,0.4);
  display: block;
}
.book-byline-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--bone);
  letter-spacing: 0.04em;
}
.book-byline:hover .book-byline-text { color: var(--gold); }


  /* =========================================================
   * v0.9.1 — LINKTREE PAGE
   * Single-column bio-link layout for /links page.
   * Avatar + name + bio → stacked Books / Web Novels / Follow.
   * ========================================================= */
  .block-linktree {
    max-width: 640px;
    margin: 3rem auto;
    padding: 1.5rem 1rem 5rem;
  }
  .linktree-card { display: flex; flex-direction: column; }

  /* ---- Header (avatar + name + bio) ---- */
  .linktree-header { text-align: center; margin-bottom: 3rem; }
  .linktree-avatar {
    width: 120px; height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 4px var(--void), 0 0 24px rgba(255,212,0,0.4);
    margin-bottom: 1.2rem;
    background: var(--obsidian);
  }
  .linktree-name {
    font-family: 'Forum', serif;
    font-size: clamp(1.8rem, 5vw, 2.6rem);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.5rem;
    text-shadow: 0 0 24px rgba(255,212,0,0.4), 0 0 48px rgba(229,9,20,0.2);
    position: relative;
    display: inline-block;
    animation: glitch-tear 3s infinite;
  }
  .linktree-name::before, .linktree-name::after {
    content: attr(data-text);
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; mix-blend-mode: screen;
  }
  .linktree-name::before { color: var(--red);  animation: glitch-clip-1 2.4s infinite linear; }
  .linktree-name::after  { color: var(--cyan); animation: glitch-clip-2 2.4s infinite linear; }
  .linktree-bio {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--bone-dim);
    max-width: 32em;
    margin: 0 auto;
    line-height: 1.5;
  }

  /* ---- Section headers ---- */
  .linktree-section { margin-bottom: 2.5rem; }
  .linktree-section-title {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.45em;
    color: var(--gold);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 1rem;
    padding: 0 1rem;
  }
  .linktree-section-title::before, .linktree-section-title::after {
    content: '\xE2\x97\x86';
    color: var(--red);
    margin: 0 0.8rem;
    font-size: 0.7em;
    vertical-align: middle;
    text-shadow: 0 0 8px rgba(229,9,20,0.5);
  }

  /* ---- Stacked link tiles ---- */
  .linktree-stack { display: flex; flex-direction: column; gap: 0.7rem; }
  .linktree-tile {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem;
    background: var(--obsidian);
    border: 1px solid var(--border-dim);
    color: var(--bone);
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  }
  .linktree-tile:hover {
    background: var(--panel);
    border-color: var(--gold);
    box-shadow: 0 0 18px rgba(255,212,0,0.22);
    transform: translateY(-1px);
  }
  .linktree-tile-cover {
    width: 60px;
    aspect-ratio: 2/3;
    background: var(--void);
    border: 1px solid var(--border-dim);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold-deep);
    font-size: 1.4rem;
  }
  .linktree-tile-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .linktree-tile-body { min-width: 0; }
  .linktree-tile-eyebrow {
    font-family: 'Forum', serif;
    font-size: 0.6rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 0.2rem;
    text-shadow: 0 0 6px rgba(229,9,20,0.45);
  }
  .linktree-tile-eyebrow--free { color: var(--gold); text-shadow: 0 0 6px rgba(255,212,0,0.5); }
  .linktree-tile-title {
    font-family: 'Forum', serif;
    font-size: 1.02rem;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .linktree-tile-sub {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--bone-dim);
    margin-top: 0.2rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .linktree-tile-cta {
    color: var(--gold);
    font-size: 1.4rem;
    opacity: 0.55;
    transition: opacity 0.25s, transform 0.25s;
    padding-right: 0.4rem;
  }
  .linktree-tile:hover .linktree-tile-cta { opacity: 1; transform: translateX(3px); }

  /* Reader-magnet "free download" tile — leans gold to signal primary CTA */
  .linktree-tile--free { border-color: rgba(255,212,0,0.35); }
  .linktree-tile--free:hover { box-shadow: 0 0 22px rgba(255,212,0,0.4); }

  /* ---- Social row ---- */
  .linktree-section--social .linktree-social {
    list-style: none;
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    padding: 0; margin: 0;
  }
  .linktree-social li { list-style: none; }
  .linktree-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    color: var(--gold);
    background: var(--obsidian);
    border: 1px solid var(--border-dim);
    text-decoration: none;
    transition: all 0.25s;
    font-size: 1.05rem;
  }
  .linktree-social a:hover {
    background: var(--gold);
    color: var(--void);
    border-color: var(--gold);
    box-shadow: 0 0 16px rgba(255,212,0,0.5);
    transform: translateY(-2px);
  }

  @media (max-width: 480px) {
    .block-linktree { padding: 1rem 0.75rem 4rem; }
    .linktree-tile { grid-template-columns: 52px 1fr auto; padding: 0.65rem; }
    .linktree-tile-cover { width: 52px; }
    .linktree-tile-title { font-size: 0.95rem; }
    .linktree-tile-sub { font-size: 0.8rem; }
  }


  /* =========================================================
   * v0.9.3 — COMMISSION INQUIRY FORMS
   * Shortcodes: [ht_commission_art] [ht_commission_cover] [ht_commission_ai]
   * Self-posting forms, wp_mail() delivery, Haunted Tech aesthetic.
   * ========================================================= */
  .htf-wrap {
    max-width: 680px;
    margin: 3rem auto;
    padding: 0 1rem;
  }
  .htf-form {
    background: var(--obsidian);
    border: 1px solid var(--border-dim);
    padding: 2.5rem 2rem;
  }
  .htf-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 1.4rem;
  }
  .htf-label {
    font-family: 'Forum', serif;
    font-size: 0.7rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--gold);
  }
  .htf-req { color: var(--red); margin-left: 0.2em; }
  .htf-input {
    background: var(--void);
    border: 1px solid var(--border-dim);
    color: var(--bone);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1rem;
    padding: 0.65rem 0.9rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
    -webkit-appearance: none;
  }
  .htf-input:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(255,212,0,0.15);
  }
  .htf-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%23ffd400' d='M5 7L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
    cursor: pointer;
  }
  textarea.htf-input { resize: vertical; min-height: 7rem; line-height: 1.6; }
  .htf-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
  }
  .htf-req-note {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--bone-dim);
    margin: 0;
  }
  .htf-submit {
    font-family: 'Forum', serif;
    font-size: 0.78rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--void);
    background: var(--gold);
    border: none;
    padding: 0.85rem 2rem;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  .htf-submit:hover {
    background: #ffe44d;
    box-shadow: 0 0 18px rgba(255,212,0,0.4);
    transform: translateY(-1px);
  }
  .htf-error-box {
    background: rgba(90,10,18,0.25);
    border: 1px solid var(--red);
    color: var(--bone);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    padding: 1rem 1.2rem;
    margin-bottom: 1.5rem;
  }
  .htf-error-list { margin: 0; padding-left: 1.2rem; }
  .htf-error-list li { margin-bottom: 0.3rem; }
  .htf-success {
    text-align: center;
    padding: 4rem 2rem;
    border: 1px solid var(--border-dim);
    background: var(--obsidian);
  }
  .htf-success-icon {
    font-size: 2.5rem;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(255,212,0,0.5);
    margin-bottom: 1.2rem;
  }
  .htf-success-title {
    font-family: 'Forum', serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--gold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 0.75rem;
  }
  .htf-success-msg {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--bone);
    margin: 0;
  }
  @media (max-width: 600px) {
    .htf-form { padding: 1.5rem 1rem; }
    .htf-footer { flex-direction: column; align-items: flex-start; }
  }

/* ==========================================================
 * SERVICE ACTIONS + INQUIRY BUTTONS (v0.9.1)
 * ========================================================== */
.service-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.service-btn-inquire {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
}
.service-btn-inquire:hover {
  background: var(--gold);
  color: var(--void);
}

/* ==========================================================
 * COMMISSION INQUIRY MODALS (v0.9.1)
 * Mirrors the About modal: fixed overlay, gold-framed panel
 * with corner accents, scanline backdrop. Opened/closed via
 * .active class (inline script in ht_render_services()).
 * ========================================================== */
.commission-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.94);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  backdrop-filter: blur(10px);
}
.commission-modal.active { display: flex; animation: lightbox-fade 0.4s ease-out; }
.commission-modal::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(255,212,0,0.04) 2px, rgba(255,212,0,0.04) 3px);
  pointer-events: none;
  animation: scanline-drift 8s linear infinite;
}
.commission-frame {
  position: relative;
  max-width: 1100px;
  max-height: 88vh;
  height: 700px;
  width: 100%;
  background: var(--void);
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 4px var(--void),
    0 0 0 5px var(--gold),
    0 40px 80px rgba(229, 9, 20, 0.3);
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-rows: 1fr;
  overflow: hidden;
}
@media (max-width: 900px) {
  .commission-frame {
    grid-template-columns: 1fr;
    grid-template-rows: 240px 1fr;
    max-height: 92vh;
    height: 92vh;
  }
}
@media (max-width: 600px) {
  .commission-modal { padding: 1rem; }
  .commission-frame { grid-template-rows: 200px 1fr; }
}

/* ----- Left poster panel: large icon + atmospheric tagline ----- */
.commission-poster {
  background: var(--void);
  position: relative;
  border-right: 1px solid var(--border-dim);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  overflow: hidden;
}
@media (max-width: 900px) {
  .commission-poster { border-right: none; border-bottom: 1px solid var(--border-dim); padding: 2rem 1.5rem; }
}
.commission-poster::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 70%, rgba(15,13,10,0.6) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px);
  pointer-events: none;
}
.commission-poster-icon {
  font-size: 9rem;
  line-height: 1;
  color: var(--gold);
  text-shadow:
    0 0 30px rgba(255,212,0,0.5),
    0 0 60px rgba(229,9,20,0.25);
  margin-bottom: 2.5rem;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .commission-poster-icon { font-size: 5rem; margin-bottom: 1rem; }
}
.commission-poster-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.15rem;
  color: var(--bone);
  text-align: center;
  line-height: 1.65;
  max-width: 90%;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .commission-poster-tagline { font-size: 0.95rem; }
}
.commission-frame::before, .commission-frame::after {
  content: ''; position: absolute; width: 50px; height: 50px;
  border: 2px solid var(--gold);
  box-shadow: 0 0 16px rgba(255, 212, 0, 0.4);
  z-index: 10;
  pointer-events: none;
}
.commission-frame::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.commission-frame::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }

.commission-close {
  position: absolute; top: -1px; right: -1px;
  width: 48px; height: 48px;
  background: var(--void);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'Forum', serif;
  font-size: 1.4rem;
  cursor: pointer;
  z-index: 20;
  transition: all 0.2s;
}
.commission-close:hover {
  background: var(--red);
  color: var(--bone);
  border-color: var(--red);
  text-shadow: 0 0 8px var(--red);
}

.commission-meta {
  padding: 3rem 2.5rem 2.5rem;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
  position: relative;
  flex: 1 1 auto;
}
@media (max-width: 600px) { .commission-meta { padding: 2.4rem 1.4rem 1.6rem; } }
.commission-meta-head { flex-shrink: 0; text-align: center; }

.commission-eyebrow {
  font-family: 'Forum', serif;
  font-size: 0.7rem;
  letter-spacing: 0.5em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
  text-shadow: 0 0 6px rgba(229, 9, 20, 0.4);
}
.commission-eyebrow::before, .commission-eyebrow::after {
  content: 'â—†'; color: var(--gold); margin: 0 0.5rem;
  font-size: 0.7em; vertical-align: middle;
}
.commission-title {
  font-family: 'Forum', serif;
  font-size: clamp(1.5rem, 4vw, 2.2rem);
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.4rem;
  text-shadow: 0 0 24px rgba(255, 212, 0, 0.4);
  position: relative;
  display: inline-block;
}
.commission-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.4;
  margin: 1.2rem 0 1.5rem;
}

.commission-body-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.commission-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
  padding-right: 1rem;
  margin-right: -0.5rem;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) rgba(255, 212, 0, 0.04);
}
.commission-body::-webkit-scrollbar { width: 6px; }
.commission-body::-webkit-scrollbar-track { background: rgba(255, 212, 0, 0.04); }
.commission-body::-webkit-scrollbar-thumb {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(255, 212, 0, 0.5);
}
.commission-body::-webkit-scrollbar-thumb:hover { background: var(--red); box-shadow: 0 0 8px var(--red); }

/* Form sits cleanly inside the modal's right column — strip its outer
 * wrap/panel chrome so the modal frame is the only visible container. */
.commission-body .htf-wrap { max-width: none; margin: 0; padding: 0; }
.commission-body .htf-form { background: none; border: none; padding: 0; }

body.commission-open { overflow: hidden; }
/* Hide every page-level visual while a commission modal is open so the
 * modal overlay reads as a clean, fully-black backdrop — matching the
 * about modal exactly.
 *   - header / social-bar: would otherwise sit above the overlay thanks
 *     to their own backdrop-filter stacking contexts.
 *   - .crt-band / .static-burst: position:fixed page-level "overlays"
 *     with mix-blend-mode:screen — their brightness bleeds THROUGH the
 *     94% black modal overlay because screen-blend adds light. */
body.commission-open header,
body.commission-open .social-bar,
body.commission-open .crt-band,
body.commission-open .static-burst { display: none !important; }

/* ==========================================================
 * GALLERY INQUIRE BUTTON (v0.9.1)
 * ========================================================== */
.gallery-inquire {
  font-family: 'Forum', serif;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.gallery-inquire:hover {
  background: var(--gold);
  color: var(--void);
}