:root {
      --bg: #070707;
      --bg-soft: #0d0d0f;
      --panel: rgba(12, 12, 14, 0.7);
      --panel-strong: rgba(16, 16, 18, 0.9);
      --line: rgba(255, 255, 255, 0.08);
      --line-strong: rgba(255, 255, 255, 0.18);
      --text: #f4efe7;
      --muted: #b5ada0;
      --muted-2: #8b857d;
      --gold: #d6c18d;
      --gold-soft: rgba(214, 193, 141, 0.18);
      --accent: #9f2022;
      --accent-soft: rgba(159, 32, 34, 0.16);
      --shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --max: 1240px;
      --header: 76px;
      --tracking: 0.12em;
      --transition: 320ms cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--text);
      background: radial-gradient(circle at top, rgba(120, 20, 24, 0.14), transparent 28%), var(--bg);
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -4;
    }

    body::before {
      background:
        linear-gradient(180deg, rgba(2, 2, 2, 0.08) 0%, rgba(2,2,2,0.74) 100%),
        radial-gradient(circle at 18% 22%, rgba(159, 32, 34, 0.22), transparent 24%),
        radial-gradient(circle at 80% 28%, rgba(214, 193, 141, 0.08), transparent 24%),
        url('de-sang-froid.jpg') left top / 40vw auto no-repeat,
        url('sur-la-peau-de-mes-ennemis.jpg') right top / 40vw auto no-repeat,
        linear-gradient(180deg, #121212, #070707);
      opacity: 0.28;
      filter: saturate(0.75) blur(1.5px);
      transform: scale(1.04);
      animation: drift 28s ease-in-out infinite alternate;
    }

    body::after {
      background:
        linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0) 20%),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 28%),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0,0,0,0.24) 100%);
      mix-blend-mode: screen;
      opacity: 0.45;
    }

    .noise,
    .vignette,
    .cursor-veil,
    #rain {
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    .noise {
      z-index: -2;
      opacity: 0.065;
      background-image:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.35) 0 1px, transparent 1px),
        radial-gradient(circle at 75% 35%, rgba(255,255,255,0.4) 0 1px, transparent 1px),
        radial-gradient(circle at 45% 80%, rgba(255,255,255,0.28) 0 1px, transparent 1px),
        radial-gradient(circle at 85% 65%, rgba(255,255,255,0.35) 0 1px, transparent 1px);
      background-size: 160px 160px, 200px 200px, 180px 180px, 220px 220px;
      animation: grain 6s steps(8) infinite;
    }

    .vignette {
      z-index: -1;
      background: radial-gradient(circle at center, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
    }

    .cursor-veil {
      z-index: 1;
      background: radial-gradient(circle 260px at var(--mx, 50%) var(--my, 50%), rgba(214, 193, 141, 0.09), transparent 70%);
      opacity: 0.9;
      mix-blend-mode: screen;
      transition: opacity 240ms ease;
    }

    #rain { z-index: 0; opacity: 0.42; }

    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; height: auto; }
    main section { content-visibility: auto; contain-intrinsic-size: 1px 900px; }
    .hero, .topbar { content-visibility: visible; contain-intrinsic-size: auto; }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 30;
      height: var(--header);
      display: flex;
      align-items: center;
      border-bottom: 1px solid transparent;
      background: linear-gradient(180deg, rgba(7,7,7,0.82), rgba(7,7,7,0.08));
      backdrop-filter: blur(14px);
      transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    }

    .topbar.scrolled {
      background: rgba(8, 8, 9, 0.82);
      border-color: var(--line);
      box-shadow: 0 16px 40px rgba(0,0,0,0.28);
    }

    .wrap {
      width: min(calc(100% - 32px), var(--max));
      margin: 0 auto;
    }

    .topbar .wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .brand small,
    .eyebrow,
    .section-tag,
    .book-kicker,
    .pill,
    .ghost-badge,
    .track-label {
      letter-spacing: var(--tracking);
      text-transform: uppercase;
      font-size: 0.72rem;
      color: var(--gold);
    }

    .brand strong {
      font-size: 0.95rem;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 800;
      white-space: nowrap;
    }

    .nav {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .nav a {
      padding: 10px 14px;
      border-radius: 999px;
      color: var(--muted);
      border: 1px solid transparent;
      transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
    }

    .nav a:hover,
    .nav a:focus-visible {
      color: var(--text);
      background: rgba(255,255,255,0.04);
      border-color: var(--line);
      transform: translateY(-1px);
    }

    main {
      position: relative;
      isolation: isolate;
    }

    section {
      position: relative;
      padding: 110px 0;
    }

    .hero {
      min-height: calc(100svh - var(--header));
      display: flex;
      align-items: center;
      padding-top: 70px;
      padding-bottom: 80px;
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 44px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 22px;
    }

    .eyebrow::before {
      content: "";
      width: 56px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }

    h1,
    h2,
    h3,
    .display {
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      text-transform: uppercase;
      margin: 0;
      line-height: 0.9;
      letter-spacing: 0.04em;
      text-wrap: balance;
    }

    h1 {
      font-size: clamp(3.4rem, 10vw, 7.3rem);
      max-width: 9ch;
      text-shadow: 0 16px 30px rgba(0,0,0,0.45);
    }

    h1 .accent {
      display: block;
      color: var(--gold);
      position: relative;
    }

    h1 .accent::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 10px;
      width: 100%;
      height: 14px;
      background: linear-gradient(90deg, rgba(159, 32, 34, 0.55), transparent 70%);
      z-index: -1;
      filter: blur(10px);
    }

    .hero-copy p {
      max-width: 64ch;
      margin: 26px 0 0;
      font-size: clamp(1rem, 2vw, 1.15rem);
      color: var(--muted);
      line-height: 1.75;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 14px;
      margin-top: 30px;
    }

    .button,
    button.button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      min-height: 52px;
      padding: 0 22px;
      border-radius: 999px;
      border: 1px solid var(--line-strong);
      background: rgba(255,255,255,0.02);
      color: var(--text);
      font-weight: 700;
      letter-spacing: 0.03em;
      transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
      box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    }

    .button:hover,
    .button:focus-visible {
      transform: translateY(-2px);
      border-color: rgba(214, 193, 141, 0.55);
      background: rgba(255,255,255,0.05);
      box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    }

    .button.primary {
      background: linear-gradient(135deg, rgba(159, 32, 34, 0.85), rgba(80, 10, 12, 0.94));
      border-color: rgba(188, 77, 79, 0.48);
    }

    .button.primary:hover,
    .button.primary:focus-visible {
      background: linear-gradient(135deg, rgba(179, 40, 43, 0.92), rgba(88, 12, 14, 0.98));
    }

    .hero-meta {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 34px;
      max-width: 620px;
    }

    .hero-stat {
      padding: 16px 18px;
      border-radius: 20px;
      border: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
      backdrop-filter: blur(10px);
    }

    .hero-stat strong {
      display: block;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 1.45rem;
      letter-spacing: 0.06em;
      color: var(--gold);
      margin-bottom: 6px;
    }

    .hero-stat span {
      display: block;
      color: var(--muted);
      line-height: 1.5;
      font-size: 0.95rem;
    }

    .hero-visual {
      position: relative;
      min-height: 620px;
    }

    .hero-panel {
      position: absolute;
      inset: auto 0 auto auto;
      width: min(92%, 620px);
      height: 100%;
      margin-left: auto;
      border-radius: var(--radius-xl);
      border: 1px solid rgba(255,255,255,0.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
        linear-gradient(180deg, rgba(159, 32, 34, 0.08), rgba(0,0,0,0));
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(18px);
    }

    .hero-panel::before,
    .hero-panel::after {
      content: "";
      position: absolute;
      inset: -30%;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: 0.6;
    }

    .hero-panel::before {
      background: radial-gradient(circle at 50% 45%, rgba(214,193,141,0.16), transparent 34%);
      animation: pulse 8s ease-in-out infinite;
    }

    .hero-panel::after {
      background: linear-gradient(130deg, transparent 24%, rgba(255,255,255,0.1) 48%, transparent 72%);
      transform: translateX(-25%) rotate(8deg);
      animation: sheen 8s ease-in-out infinite;
      opacity: 0.22;
    }

    .cover-collage {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 26px;
    }

    .cover {
      position: absolute;
      width: min(58%, 320px);
      aspect-ratio: 2 / 3;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: 0 32px 70px rgba(0,0,0,0.42);
      transform-style: preserve-3d;
      transition: transform 220ms ease, box-shadow 220ms ease;
      background: #0b0b0c;
    }

    .cover::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(130deg, rgba(255,255,255,0.18), transparent 36%, transparent 62%, rgba(255,255,255,0.04));
      pointer-events: none;
    }

    .cover img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: saturate(0.92) contrast(1.02);
    }

    .cover.primary {
      left: 10%;
      top: 16%;
      transform: rotate(-8deg) translateZ(0);
      z-index: 2;
    }

    .cover.secondary {
      right: 8%;
      bottom: 13%;
      transform: rotate(8deg) translateZ(0);
      z-index: 1;
    }

    .ghost-track {
      position: absolute;
      left: 32px;
      right: 32px;
      bottom: 28px;
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding-top: 18px;
      border-top: 1px solid var(--line);
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: 0.22em;
      font-size: 0.72rem;
      z-index: 3;
    }

    .whisper {
      position: absolute;
      left: 34px;
      top: 30px;
      display: grid;
      gap: 8px;
      z-index: 3;
      color: var(--muted-2);
      text-transform: uppercase;
      letter-spacing: 0.24em;
      font-size: 0.7rem;
    }

    .spot-quote {
      position: absolute;
      right: 28px;
      top: 28px;
      width: min(260px, 48%);
      padding: 16px 18px;
      border-radius: 18px;
      background: rgba(0,0,0,0.38);
      border: 1px solid rgba(255,255,255,0.08);
      backdrop-filter: blur(12px);
      z-index: 3;
      box-shadow: 0 16px 30px rgba(0,0,0,0.2);
    }

    .spot-quote p {
      margin: 10px 0 0;
      color: var(--muted);
      line-height: 1.65;
      font-size: 0.95rem;
    }

    .section-head {
      display: grid;
      gap: 18px;
      margin-bottom: 34px;
    }

    .section-head h2 {
      font-size: clamp(2.5rem, 7vw, 4.8rem);
      max-width: 10ch;
    }

    .section-head p {
      max-width: 74ch;
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
      font-size: 1.05rem;
    }

    .section-tag {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }

    .section-tag::before {
      content: "";
      width: 42px;
      height: 1px;
      background: linear-gradient(90deg, rgba(214,193,141,0), rgba(214,193,141,1), rgba(214,193,141,0));
    }

    .manifesto-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .manifesto-card,
    .book-card,
    .author-panel,
    .timeline-panel,
    .cta-panel {
      position: relative;
      border-radius: var(--radius-lg);
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
        var(--panel);
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(12px);
    }

    .manifesto-card {
      padding: 28px;
      min-height: 300px;
      display: grid;
      align-content: start;
      gap: 14px;
    }

    .manifesto-card::before,
    .book-card::before,
    .author-panel::before,
    .timeline-panel::before,
    .cta-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(145deg, rgba(214,193,141,0.1), transparent 34%, transparent 66%, rgba(159,32,34,0.12));
      pointer-events: none;
    }

    .manifesto-card .icon {
      width: 54px;
      height: 54px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: var(--gold);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 1.4rem;
      letter-spacing: 0.08em;
    }

    .manifesto-card h3 {
      font-size: 2rem;
    }

    .manifesto-card p {
      margin: 0;
      color: var(--muted);
      line-height: 1.75;
    }

    .books-shell {
      display: grid;
      gap: 22px;
    }

    .books-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 18px;
    }

    .book-card {
      grid-column: span 4;
      min-height: 100%;
      transform-style: preserve-3d;
      transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
      isolation: isolate;
    }

    .book-card.featured {
      grid-column: span 6;
    }

    .book-card:hover,
    .book-card:focus-within {
      transform: translateY(-4px);
      border-color: rgba(214,193,141,0.32);
      box-shadow: 0 30px 90px rgba(0,0,0,0.38);
    }

    .book-inner {
      position: relative;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
      gap: 0;
      min-height: 100%;
    }

    .book-card:not(.featured) .book-inner {
      grid-template-columns: 1fr;
    }

    .book-media {
      position: relative;
      min-height: 100%;
      overflow: hidden;
      border-right: 1px solid var(--line);
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)), #0b0b0d;
    }

    .book-card:not(.featured) .book-media {
      min-height: 340px;
      border-right: none;
      border-bottom: 1px solid var(--line);
    }

    .book-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .book-placeholder {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 30%, rgba(214,193,141,0.14), transparent 24%),
        linear-gradient(180deg, rgba(159,32,34,0.12), rgba(255,255,255,0.02));
    }

    .book-placeholder .roman {
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(4rem, 10vw, 6.2rem);
      color: rgba(214,193,141,0.85);
      text-transform: uppercase;
    }

    .book-number {
      position: absolute;
      left: 18px;
      top: 18px;
      z-index: 2;
      min-width: 52px;
      height: 52px;
      padding: 0 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: rgba(6,6,7,0.72);
      border: 1px solid rgba(255,255,255,0.08);
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 1.15rem;
      letter-spacing: 0.12em;
      color: var(--gold);
      box-shadow: 0 10px 24px rgba(0,0,0,0.24);
    }

    .book-content {
      position: relative;
      display: grid;
      align-content: start;
      gap: 18px;
      padding: 28px;
      min-height: 100%;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      width: fit-content;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
    }

    .pill::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 18px rgba(214,193,141,0.55);
    }

    .pill.available::before {
      background: #9cc96b;
      box-shadow: 0 0 18px rgba(156, 201, 107, 0.55);
    }

    .book-content h3 {
      font-size: clamp(2rem, 5vw, 3rem);
      line-height: 0.92;
    }

    .book-content p {
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
      font-size: 1rem;
    }

    .book-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .book-meta span {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      color: var(--muted);
      font-size: 0.9rem;
    }

    .book-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: auto;
      padding-top: 6px;
    }

    .book-actions .button {
      min-height: 46px;
      padding-inline: 18px;
      font-size: 0.95rem;
    }

    .ghost-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-2);
    }

    .ghost-badge::before {
      content: "";
      width: 28px;
      height: 1px;
      background: var(--line);
    }

    .timeline-panel {
      padding: 24px;
      margin-top: 8px;
    }

    .timeline-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      margin-bottom: 18px;
      flex-wrap: wrap;
    }

    .timeline {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 12px;
    }

    .track-node {
      position: relative;
      padding: 18px 14px 16px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.025);
      min-height: 146px;
      overflow: hidden;
    }

    .track-node::after {
      content: "";
      position: absolute;
      inset: auto 16px 0;
      height: 2px;
      background: linear-gradient(90deg, rgba(214,193,141,0), rgba(214,193,141,0.95), rgba(214,193,141,0));
      opacity: 0.3;
    }

    .track-node.available {
      border-color: rgba(214,193,141,0.26);
      background: linear-gradient(180deg, rgba(214,193,141,0.08), rgba(255,255,255,0.02));
    }

    .track-node strong {
      display: block;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: 1.8rem;
      color: var(--gold);
      margin-bottom: 16px;
    }

    .track-node h4 {
      margin: 0 0 10px;
      font-size: 1rem;
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text);
    }

    .track-node p {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--muted);
    }

    .author-layout {
      display: grid;
      grid-template-columns: 1fr 0.95fr;
      gap: 18px;
      align-items: stretch;
    }

    .author-panel {
      padding: 32px;
      min-height: 100%;
    }

    .author-panel h2 {
      font-size: clamp(2.4rem, 6vw, 4rem);
      margin-bottom: 16px;
    }

    .author-panel p {
      margin: 0;
      color: var(--muted);
      line-height: 1.85;
      max-width: 60ch;
    }

    .author-grid {
      display: grid;
      gap: 16px;
      margin-top: 24px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .detail {
      padding: 18px;
      border-radius: 18px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.03);
    }

    .detail strong {
      display: block;
      margin-bottom: 8px;
      color: var(--gold);
      font-size: 0.95rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .detail span {
      color: var(--muted);
      line-height: 1.65;
    }

    .author-poster {
      position: relative;
      min-height: 100%;
      padding: 0;
      display: grid;
      place-items: stretch;
      overflow: hidden;
    }

    .author-poster::before {
      content: "Amaury Vincent";
      position: absolute;
      right: -18px;
      bottom: 10px;
      font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
      font-size: clamp(3rem, 8vw, 6rem);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.04);
      transform: rotate(-90deg) translateY(18px);
      transform-origin: right bottom;
      white-space: nowrap;
      z-index: 1;
    }

    .poster-bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.74)),
        radial-gradient(circle at 50% 22%, rgba(214,193,141,0.15), transparent 25%),
        radial-gradient(circle at 50% 55%, rgba(159,32,34,0.18), transparent 30%),
        url('de-sang-froid.jpg') center top / cover no-repeat;
      filter: saturate(0.5) blur(0.5px);
      transform: scale(1.06);
    }

    .poster-content {
      position: relative;
      z-index: 2;
      margin-top: auto;
      padding: 30px;
      display: grid;
      gap: 16px;
      background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.82));
    }

    .poster-content h3 {
      font-size: clamp(2.4rem, 6vw, 4rem);
      max-width: 10ch;
    }

    .poster-content p {
      margin: 0;
      color: var(--muted);
      line-height: 1.8;
      max-width: 52ch;
    }

    .cta {
      padding-top: 80px;
      padding-bottom: 110px;
    }

    .cta-panel {
      padding: 36px;
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 22px;
      align-items: center;
    }

    .cta-panel h2 {
      font-size: clamp(2.4rem, 6vw, 4.8rem);
      max-width: 10ch;
    }

    .cta-panel p {
      margin: 18px 0 0;
      color: var(--muted);
      line-height: 1.85;
      max-width: 60ch;
    }

    .cta-actions {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 26px;
    }

    .cta-note {
      padding: 24px;
      border-radius: 24px;
      border: 1px solid var(--line);
      background: rgba(255,255,255,0.03);
      display: grid;
      gap: 18px;
    }

    .cta-note p {
      margin: 0;
      font-size: 0.98rem;
      line-height: 1.8;
    }

    .cta-note ul {
      margin: 0;
      padding-left: 1.2rem;
      color: var(--muted);
      line-height: 1.8;
    }

    footer {
      padding: 28px 0 40px;
      border-top: 1px solid var(--line);
      background: rgba(0,0,0,0.18);
    }

    .footer-grid {
      display: flex;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      align-items: center;
    }

    .footer-grid p {
      margin: 0;
      color: var(--muted-2);
      line-height: 1.6;
      font-size: 0.92rem;
    }

    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1);
    }

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

    .book-card .beam {
      position: absolute;
      inset: -50%;
      background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,0.13), transparent 25%);
      opacity: 0;
      transition: opacity 220ms ease;
      mix-blend-mode: screen;
      pointer-events: none;
      z-index: 1;
    }

    .book-card:hover .beam,
    .book-card:focus-within .beam {
      opacity: 1;
    }

    .divider {
      height: 1px;
      margin: 18px 0 0;
      background: linear-gradient(90deg, transparent, rgba(214,193,141,0.7), transparent);
      opacity: 0.44;
    }

    @keyframes drift {
      0% { transform: scale(1.08) translate3d(0, 0, 0); }
      100% { transform: scale(1.14) translate3d(0, 10px, 0); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 0.55; }
      50% { transform: scale(1.08); opacity: 0.8; }
    }

    @keyframes sheen {
      0%, 100% { transform: translateX(-25%) rotate(8deg); }
      50% { transform: translateX(25%) rotate(8deg); }
    }

    @keyframes grain {
      0% { transform: translate(0, 0); }
      25% { transform: translate(-0.7%, 0.4%); }
      50% { transform: translate(0.5%, -0.4%); }
      75% { transform: translate(-0.3%, -0.7%); }
      100% { transform: translate(0.3%, 0.7%); }
    }

    @media (max-width: 1180px) {
      .hero-grid,
      .author-layout,
      .cta-panel {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        min-height: 540px;
      }

      .books-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .book-card,
      .book-card.featured {
        grid-column: span 1;
      }

      .book-inner {
        grid-template-columns: 1fr;
      }

      .book-media {
        min-height: 360px;
        border-right: none;
        border-bottom: 1px solid var(--line);
      }

      .timeline {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
    }

    @media (max-width: 860px) {
      section {
        padding: 86px 0;
      }

      .hero {
        padding-top: 40px;
      }

      .topbar {
        height: auto;
        padding: 12px 0;
      }

      .topbar .wrap {
        flex-direction: column;
        align-items: stretch;
      }

      .nav {
        justify-content: flex-start;
      }

      .hero-meta,
      .manifesto-grid,
      .author-grid,
      .timeline,
      .books-grid {
        grid-template-columns: 1fr;
      }

      .hero-visual {
        min-height: 500px;
      }

      .cover.primary {
        left: 8%;
        top: 13%;
      }

      .cover.secondary {
        right: 6%;
        bottom: 11%;
      }

      .spot-quote {
        width: auto;
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 94px;
      }

      .ghost-track {
        letter-spacing: 0.12em;
      }
    }

    @media (max-width: 580px) {
      .wrap {
        width: min(calc(100% - 24px), var(--max));
      }

      .hero-panel {
        width: 100%;
      }

      .cover {
        width: min(64%, 250px);
      }

      .button,
      .book-actions .button {
        width: 100%;
      }

      .hero-actions,
      .book-actions,
      .cta-actions {
        flex-direction: column;
      }

      .whisper {
        left: 20px;
        top: 18px;
      }

      .ghost-track {
        left: 20px;
        right: 20px;
        font-size: 0.64rem;
      }

      .book-content,
      .manifesto-card,
      .author-panel,
      .timeline-panel,
      .cta-panel,
      .cta-note,
      .poster-content {
        padding: 22px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation: none !important;
        transition-duration: 1ms !important;
      }
      .reveal {
        opacity: 1;
        transform: none;
      }
      .cursor-veil,
      #rain,
      .noise {
        display: none;
      }
    }

    .countdown {
      margin-top: 18px;
      padding: 16px 14px;
      border: 1px solid rgba(214, 193, 141, 0.18);
      background:
        linear-gradient(180deg, rgba(214, 193, 141, 0.07), rgba(214, 193, 141, 0.02)),
        rgba(7, 7, 9, 0.72);
      border-radius: 18px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 18px 40px rgba(0,0,0,0.24);
    }

    .countdown-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 12px;
      color: var(--muted);
      font-size: 0.82rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }

    .countdown-unit {
      padding: 12px 8px;
      border-radius: 14px;
      text-align: center;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
    }

    .countdown-value {
      display: block;
      font-size: clamp(1.2rem, 2vw, 1.8rem);
      line-height: 1;
      font-weight: 800;
      color: var(--text);
      text-shadow: 0 0 18px rgba(214, 193, 141, 0.08);
    }

    .countdown-name {
      display: block;
      margin-top: 6px;
      font-size: 0.68rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    .countdown-footnote {
      margin-top: 10px;
      color: var(--muted-2);
      font-size: 0.82rem;
    }

    .countdown.waiting {
      border-style: dashed;
      background: rgba(255,255,255,0.02);
    }

    .countdown.waiting .countdown-grid {
      grid-template-columns: 1fr;
    }

    .countdown.waiting .countdown-unit {
      padding: 16px 14px;
      text-align: left;
    }
.countdown-progress {
  position: relative;
  width: 100%;
  height: 12px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(214, 193, 141, 0.12);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.countdown-progress-bar {
  position: relative;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8f1d20 0%, #c58f56 55%, #d6c18d 100%);
  transition: width 1s linear;
}

.countdown-progress-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 100%;
  background: rgba(255, 245, 210, 0.9);
  filter: blur(6px);
  opacity: 0.85;
}

.timeline-fresco {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-fresco img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  object-fit: cover;
}

    @media (max-width: 720px) {
      .countdown-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }


    @media (max-width: 768px) {
      body::before { animation: none; }
      .noise { opacity: 0.04; }
      .hero-panel::before,
      .hero-panel::after,
      .cursor-veil { display: none; }
      .manifesto-card,
      .book-card,
      .author-panel,
      .timeline-panel,
      .cta-panel,
      .hero-panel,
      .hero-stat,
      .spot-quote,
      .topbar { backdrop-filter: blur(8px); }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
      #rain, .noise, .cursor-veil { display: none; }
    }