/* Mobile-first stylesheet for jenny-ams.com */
/* Palette: deep night blue + gold + phoenix flame + violet butterfly */

:root {
  /* Colors */
  --night-1: #050b1e;
  --night-2: #0a1a3f;
  --night-3: #11254f;
  --gold-1: #d4a73a;
  --gold-2: #efc967;
  --flame-1: #ff6b1a;
  --flame-2: #ffa64d;
  --violet: #a07cff;
  --paper: #f5efe2;
  --ink: #f5efe2;
  --ink-muted: rgba(245, 239, 226, 0.72);
  --ink-faint: rgba(245, 239, 226, 0.5);

  /* Typography stacks (system, no external fonts) */
  --font-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, "URW Bookman L", "Source Serif Pro", Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-script: "Snell Roundhand", "Apple Chancery", "Lucida Calligraphy", cursive;

  /* Sizes */
  --content-width: 68rem;
  --reading-width: 38rem;
  --radius-sm: 4px;
  --radius-md: 12px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--night-1);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

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

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.005em;
}

p {
  margin: 0 0 var(--space-3);
}

a {
  color: var(--gold-2);
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease;
}

a:hover,
a:focus-visible {
  color: var(--flame-2);
}

a:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold-1);
  color: var(--night-1);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-2);
  top: var(--space-2);
  border-radius: var(--radius-sm);
}

/* Header */

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(212, 167, 58, 0.15);
  background: rgba(5, 11, 30, 0.55);
  backdrop-filter: blur(6px);
}

.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-3);
  display: flex;
  flex-wrap: nowrap; /* keep brand | nav | contact on one row; the nav wraps internally */
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font-family: var(--font-serif);
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

.brand__name {
  font-size: 1.25rem;
  letter-spacing: 0.04em;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: 0.95rem;
}

.site-nav__list a {
  color: var(--ink-muted);
  font-family: var(--font-sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: var(--space-2) 0;
  display: inline-block;
  min-height: 44px;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
  color: var(--gold-2);
}

/* Hero */

.hero {
  position: relative;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: var(--space-6) var(--space-3);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center left;
  filter: opacity(0.85);
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(5, 11, 30, 0) 40%, rgba(5, 11, 30, 0.25) 100%),
    linear-gradient(180deg, rgba(5, 11, 30, 0) 60%, rgba(5, 11, 30, 0.45) 100%);
  }

.hero__content {
  position: relative;
  z-index: 1;
  max-width: var(--content-width);
  width: 100%;
  text-align: center;
}

.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold-2);
  margin-bottom: var(--space-3);
}

.hero__title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  margin-bottom: var(--space-4);
  color: var(--ink);
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

.hero__tagline {
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 3.5vw, 1.875rem);
  font-style: italic;
  color: var(--gold-2);
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}

/* Presentation */

.presentation {
  background: rgba(10, 26, 63, 0.7);
  padding: var(--space-6) var(--space-3);
  position: relative;
}

.presentation__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}

.presentation__portrait {
  margin: 0;
  align-self: center;
  max-width: 18rem;
  margin-inline: auto;
}

.presentation__portrait img {
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 167, 58, 0.15);
}

.presentation__text {
  max-width: var(--reading-width);
  margin-inline: auto;
  text-align: center;
}

.presentation__title {
  font-size: clamp(1.875rem, 5vw, 2.5rem);
  color: var(--ink);
}

.presentation__lead {
  font-family: var(--font-script);
  font-size: clamp(1.25rem, 3.5vw, 1.75rem);
  font-style: italic;
  color: var(--gold-2);
  margin-bottom: var(--space-4);
}

.presentation__text p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink-muted);
}

.presentation__outro {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--gold-2);
  font-size: 1.15rem;
  border-left: 2px solid var(--flame-1);
  padding-left: var(--space-3);
  margin-top: var(--space-4);
}

/* Categories */

.categories {
  background: rgba(5, 11, 30, 0.5);
  padding: var(--space-6) var(--space-3);
}

.categories__title {
  max-width: var(--content-width);
  margin: 0 auto var(--space-5);
  font-size: clamp(1.5rem, 4vw, 2rem);
  text-align: center;
  color: var(--ink);
}

.categories__grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--content-width);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

.category-card {
  display: contents;
}

.category-card__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  background: rgba(17, 37, 79, 0.65);
  border: 1px solid rgba(212, 167, 58, 0.35);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--ink);
  min-height: 44px;
  transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.category-card__link:hover,
.category-card__link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-2);
  background: color-mix(in srgb, var(--night-3) 80%, var(--gold-1) 8%);
}

.category-card__icon img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(212, 167, 58, 0.25));
}

.category-card__label {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--ink);
}

.category-card__blurb {
  font-size: 0.85rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* Footer */

.site-footer {
  border-top: 1px solid rgba(212, 167, 58, 0.12);
  padding: var(--space-4) var(--space-3);
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.85rem;
  background: var(--night-1);
}

/* Tablet breakpoint */

@media (min-width: 640px) {
  .categories__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop breakpoint */

@media (min-width: 960px) {
  .hero {
    min-height: 78vh;
    padding: var(--space-7) var(--space-4);
  }

  .hero__bg::after {
    background:
      linear-gradient(90deg, rgba(5, 11, 30, 0) 30%, rgba(5, 11, 30, 0.3) 70%, rgba(5, 11, 30, 0.55) 100%);
  }

  .hero__content {
    text-align: right;
    margin-right: 0;
    margin-left: auto;
    max-width: 36rem;
  }

  .presentation__inner {
    grid-template-columns: 18rem 1fr;
    gap: var(--space-6);
    align-items: center;
  }

  .presentation__portrait {
    max-width: none;
    margin-inline: 0;
  }

  .presentation__text {
    margin-inline: 0;
  }

  .categories__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* === Section index pages (intimes, songes, echos, origines) === */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-hero {
  text-align: center;
  padding: var(--space-6) var(--space-3) var(--space-4);
  max-width: var(--reading-width);
  margin: 0 auto;
}

.section-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 7rem;
  height: 7rem;
  margin-bottom: var(--space-3);
}

.section-hero__icon img {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(212, 167, 58, 0.35));
}

.section-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  color: var(--gold-2);
  margin-bottom: var(--space-2);
}

.section-hero__blurb {
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 3.5vw, 1.35rem);
  color: var(--ink-muted);
  font-style: italic;
  margin: 0;
}

.section-bd-hero {
  margin: 0 auto var(--space-5);
  max-width: var(--content-width);
  padding: 0 var(--space-3);
}

.section-bd-hero img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(212, 167, 58, 0.25);
}

/* Panorama hero: stretched horizontal planche (e.g. fratrie hanouka 3108x792).
   On mobile the natural ratio gives a thin strip, so force a comfortable min-height
   and let object-fit handle the crop. */
.section-bd-hero--panorama img {
  min-height: 12rem;
  object-fit: cover;
  object-position: center center;
}

@media (min-width: 40rem) {
  .section-bd-hero--panorama img {
    min-height: 0;
  }
}

.section-list {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3) var(--space-7);
}

.text-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.text-list__item {
  display: block;
}

.text-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: linear-gradient(180deg,
              rgba(17, 37, 79, 0.75) 0%,
              rgba(10, 26, 63, 0.85) 100%);
  border: 1px solid rgba(212, 167, 58, 0.4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
  min-height: 8rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(239, 201, 103, 0.08);
}

.text-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
              transparent 0%,
              var(--gold-2) 30%,
              var(--flame-1) 50%,
              var(--gold-2) 70%,
              transparent 100%);
  opacity: 0.7;
}

.text-card:hover,
.text-card:focus-visible {
  border-color: var(--gold-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(212, 167, 58, 0.5),
              inset 0 1px 0 rgba(239, 201, 103, 0.18);
  transform: translateY(-4px);
  outline: none;
}

.text-card__bd {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--night-3);
}

.text-card__bd img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.text-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.text-card__title {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--gold-2);
  margin: 0 0 var(--space-1);
}

.text-card__excerpt {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 0.45rem 0.9rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-2);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 166, 77, 0.3);
  border-radius: 999px;
  align-self: flex-start;
  font-weight: 600;
}

.text-card:hover .text-card__cta,
.text-card:focus-visible .text-card__cta {
  color: #fff;
  background: rgba(255, 107, 26, 0.25);
  border-color: var(--flame-2);
}

.text-card__cta::after {
  content: "\2192";
  display: inline-block;
  transition: transform 200ms ease;
}

.text-card:hover .text-card__cta::after,
.text-card:focus-visible .text-card__cta::after {
  transform: translateX(4px);
}

@media (min-width: 40rem) {
  .text-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .text-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* === Single text page === */

.text-page {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-7);
}

.text-page__header {
  margin-bottom: var(--space-4);
  text-align: center;
}

.text-page__eyebrow {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-1);
  margin: 0 0 var(--space-2);
}

.text-page__eyebrow-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.text-page__eyebrow-link:hover,
.text-page__eyebrow-link:focus-visible {
  color: var(--gold-2);
  outline: none;
}

.text-page__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5.5vw, 2.6rem);
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

.text-page__bd {
  margin: var(--space-4) 0 var(--space-5);
}

.text-page__bd img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(212, 167, 58, 0.25);
}

.text-page__body {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--ink);
}

.text-page__body p {
  margin-bottom: var(--space-3);
}

.text-page__body > p:first-of-type::first-letter {
  font-family: var(--font-serif);
  font-size: 3.2rem;
  line-height: 0.9;
  float: left;
  margin: 0.25rem 0.5rem 0 0;
  color: var(--gold-2);
  font-weight: 500;
}

.text-page__body em,
.text-page__body i {
  font-style: italic;
  color: var(--ink-muted);
}

.text-page__body strong,
.text-page__body b {
  color: var(--gold-2);
  font-weight: 600;
}

.text-page__body blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--gold-1);
  background: rgba(17, 37, 79, 0.4);
  font-style: italic;
  color: var(--ink-muted);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.text-page__nav {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(212, 167, 58, 0.18);
  text-align: center;
}

.text-page__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--gold-1);
  text-decoration: none;
  border: 1px solid rgba(212, 167, 58, 0.4);
  border-radius: var(--radius-sm);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.text-page__back:hover,
.text-page__back:focus-visible {
  background: rgba(212, 167, 58, 0.12);
  color: var(--gold-2);
  border-color: var(--gold-2);
  outline: none;
}

.text-page__back::before {
  content: "\2190";
  display: inline-block;
}

/* Section sub-categories within a category page */
.section-subcat {
  max-width: var(--content-width);
  margin: 0 auto var(--space-6);
  padding: var(--space-5) var(--space-3) 0;
}
.section-subcat__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--gold-2);
  text-align: center;
  margin: 0 auto var(--space-3);
  max-width: var(--reading-width);
}
.section-subcat__lead {
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  font-style: italic;
  color: var(--ink-muted);
  text-align: center;
  margin: 0 auto var(--space-5);
  max-width: var(--reading-width);
}

.bd-gallery {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--content-width);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .bd-gallery { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .bd-gallery { grid-template-columns: repeat(3, 1fr); } }
.bd-gallery__item figure {
  margin: 0;
  background: var(--night-3);
  border: 1px solid rgba(212, 167, 58, 0.18);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 200ms ease, border-color 200ms ease;
}
.bd-gallery__item figure:hover { transform: translateY(-3px); border-color: var(--gold-2); }
.bd-gallery__item img { width: 100%; height: auto; display: block; }
.bd-gallery__item figcaption {
  padding: var(--space-3);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-muted);
  text-align: center;
}

.section-placeholder {
  max-width: var(--reading-width);
  margin: 0 auto var(--space-6);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.section-placeholder__title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--gold-2);
  margin-bottom: var(--space-3);
}
.section-placeholder__lead {
  font-family: var(--font-script);
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--ink-muted);
  margin-bottom: var(--space-5);
}

/* Reveries gallery */
.reveries-section {
  max-width: var(--content-width);
  margin: 0 auto var(--space-7);
  padding: 0 var(--space-3);
}
.reveries-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .reveries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .reveries-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .reveries-grid { grid-template-columns: repeat(4, 1fr); } }

.reveries-grid__item figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--night-3);
  border: 1px solid rgba(212, 167, 58, 0.25);
  aspect-ratio: 1 / 1;
  transition: transform 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.reveries-grid__item figure:hover {
  transform: scale(1.02);
  border-color: var(--gold-2);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 167, 58, 0.4);
}
.reveries-grid__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Hero ornaments overlay - magical floating elements */
.hero__ornements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.orn {
  position: absolute;
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(212, 167, 58, 0.3));
  will-change: transform, opacity;
}

/* Mandalas - background suggestion, very subtle */
.orn--mandala-1 {
  top: 8%; right: 6%;
  width: 90px; height: auto;
  opacity: 0.07;
  animation: ornDrift 22s ease-in-out infinite alternate;
}
.orn--mandala-2 {
  bottom: 14%; left: 5%;
  width: 75px; height: auto;
  opacity: 0.05;
  animation: ornDrift 28s ease-in-out infinite alternate-reverse;
}

/* Flying keys - HP style */
.orn--cle-1 {
  top: 22%; right: 22%;
  width: 40px;
  animation: ornFloat 8s ease-in-out infinite;
}
.orn--cle-2 {
  bottom: 28%; right: 12%;
  width: 50px;
  animation: ornFloat 11s ease-in-out infinite reverse;
  animation-delay: 1s;
}

/* Butterflies */
.orn--papillon-1 {
  top: 18%; left: 14%;
  width: 38px;
  animation: ornFloat 9s ease-in-out infinite;
  animation-delay: 0.5s;
}
.orn--papillon-2 {
  bottom: 22%; left: 32%;
  width: 50px;
  animation: ornFloat 12s ease-in-out infinite reverse;
}

/* Feathers - gentle drift */
.orn--plume-1 {
  top: 45%; left: 8%;
  width: 35px;
  animation: ornDrift 14s ease-in-out infinite alternate;
}
.orn--plume-2 {
  top: 12%; left: 45%;
  width: 50px;
  opacity: 0.1;
  animation: ornDrift 18s ease-in-out infinite alternate-reverse;
}

@keyframes ornFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(8px, -14px) rotate(6deg); }
}
@keyframes ornDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-10px, 8px) rotate(-5deg); }
}

/* On mobile, fewer/smaller ornaments to avoid clutter */
@media (max-width: 640px) {
  .orn--mandala-1 { width: 80px; opacity: 0.05; }
  .orn--mandala-2 { width: 70px; opacity: 0.04; }
  .orn--cle-1 { width: 40px; }
  .orn--cle-2 { width: 45px; }
  .orn--papillon-1 { width: 40px; }
  .orn--papillon-2 { width: 50px; }
  .orn--plume-1 { width: 25px; }
  .orn--plume-2 { width: 35px; }
}

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

/* Global page ornaments - subtle floating elements spread across the whole page */
.page-ornements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
body { position: relative; }
.porn {
  position: absolute;
  filter: drop-shadow(0 0 5px rgba(239, 201, 103, 0.35));
  will-change: transform, opacity;
}

/* 5 vertical zones, items spread across full page height */
/* TOP zone (0-15% of page) */
.porn--top-1 { top: 3%; left: 8%; width: 50px; opacity: 0.56; animation: pornFloat 13s ease-in-out infinite; }
.porn--top-2 { top: 5%; right: 12%; width: 55px; opacity: 0.6; animation: pornFloat 15s ease-in-out infinite reverse; }
.porn--top-3 { top: 8%; right: 38%; width: 110px; opacity: 0.32; animation: pornDrift 32s ease-in-out infinite alternate; }
.porn--top-4 { top: 12%; left: 35%; width: 40px; opacity: 0.44; animation: pornDrift 22s ease-in-out infinite alternate-reverse; }

/* UPPER-MID (15-35%) */
.porn--um-1 { top: 18%; left: 3%; width: 60px; opacity: 0.52; animation: pornFloat 12s ease-in-out infinite; animation-delay: 0.5s; }
.porn--um-2 { top: 22%; right: 7%; width: 65px; opacity: 0.48; animation: pornFloat 16s ease-in-out infinite reverse; }
.porn--um-3 { top: 28%; left: 42%; width: 130px; opacity: 0.28; animation: pornDrift 30s ease-in-out infinite alternate-reverse; }
.porn--um-4 { top: 32%; right: 4%; width: 45px; opacity: 0.4; animation: pornDrift 26s ease-in-out infinite alternate; }

/* MID (35-55%) */
.porn--mid-1 { top: 38%; right: 18%; width: 55px; opacity: 0.56; animation: pornFloat 14s ease-in-out infinite; }
.porn--mid-2 { top: 44%; left: 10%; width: 70px; opacity: 0.48; animation: pornFloat 18s ease-in-out infinite reverse; animation-delay: 1s; }
.porn--mid-3 { top: 48%; right: 38%; width: 120px; opacity: 0.3; animation: pornDrift 34s ease-in-out infinite alternate; }
.porn--mid-4 { top: 52%; left: 2%; width: 50px; opacity: 0.44; animation: pornDrift 28s ease-in-out infinite alternate-reverse; }

/* LOWER-MID (55-75%) */
.porn--lm-1 { top: 60%; left: 38%; width: 50px; opacity: 0.52; animation: pornFloat 13s ease-in-out infinite; }
.porn--lm-2 { top: 65%; right: 8%; width: 65px; opacity: 0.5; animation: pornFloat 17s ease-in-out infinite reverse; }
.porn--lm-3 { top: 70%; left: 6%; width: 100px; opacity: 0.26; animation: pornDrift 32s ease-in-out infinite alternate-reverse; }
.porn--lm-4 { top: 74%; right: 32%; width: 40px; opacity: 0.4; animation: pornDrift 24s ease-in-out infinite alternate; }

/* BOTTOM (75-100%) */
.porn--bot-1 { top: 82%; right: 22%; width: 55px; opacity: 0.52; animation: pornFloat 14s ease-in-out infinite; }
.porn--bot-2 { top: 87%; left: 8%; width: 60px; opacity: 0.48; animation: pornFloat 16s ease-in-out infinite reverse; }
.porn--bot-3 { top: 91%; right: 42%; width: 105px; opacity: 0.28; animation: pornDrift 30s ease-in-out infinite alternate; }
.porn--bot-4 { top: 95%; left: 28%; width: 48px; opacity: 0.44; animation: pornDrift 26s ease-in-out infinite alternate-reverse; }

@keyframes pornFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(6px, -10px) rotate(4deg); }
}
@keyframes pornDrift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(-8px, 6px) rotate(-3deg); }
}

/* Mobile: keep most ornaments visible, just reduce some sizes */
@media (max-width: 640px) {
  .porn--top-1 { width: 38px; opacity: 0.64; }
  .porn--top-2 { width: 42px; opacity: 0.68; }
  .porn--top-3 { width: 75px; opacity: 0.32; }
  .porn--top-4 { width: 30px; opacity: 0.52; }
  .porn--um-1 { width: 42px; opacity: 0.6; }
  .porn--um-2 { width: 45px; opacity: 0.56; }
  .porn--um-3 { width: 80px; opacity: 0.28; }
  .porn--um-4 { width: 32px; opacity: 0.48; }
  .porn--mid-1 { width: 38px; opacity: 0.6; }
  .porn--mid-2 { width: 50px; opacity: 0.52; }
  .porn--mid-3 { width: 75px; opacity: 0.3; }
  .porn--mid-4 { width: 36px; opacity: 0.48; }
  .porn--lm-1 { width: 38px; opacity: 0.56; }
  .porn--lm-2 { width: 48px; opacity: 0.52; }
  .porn--lm-3 { width: 70px; opacity: 0.26; }
  .porn--lm-4 { width: 30px; opacity: 0.44; }
  .porn--bot-1 { width: 38px; opacity: 0.56; }
  .porn--bot-2 { width: 42px; opacity: 0.52; }
  .porn--bot-3 { width: 70px; opacity: 0.28; }
  .porn--bot-4 { width: 36px; opacity: 0.48; }
}

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

/* Make sure content stays above ornaments */
.site-header, main, .site-footer { position: relative; z-index: 1; }

/* À propos page */
.apropos {
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: var(--space-6) var(--space-3);
  text-align: center;
}
.apropos__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--gold-2);
  margin-bottom: var(--space-4);
}
.apropos__lead {
  font-family: var(--font-script);
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  color: var(--ink-muted);
  margin-bottom: var(--space-4);
}
.apropos__body {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  margin-bottom: var(--space-6);
}
.apropos__contact { margin-top: var(--space-5); }
.apropos__cta {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, var(--flame-1) 0%, var(--gold-1) 100%);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(255, 107, 26, 0.35);
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.apropos__cta:hover, .apropos__cta:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 107, 26, 0.5);
  color: #fff;
}

/* Decorative frame around presentation section (placeholder for future golden orchids) */
.presentation__inner { position: relative; }
.presentation__frame {
  position: absolute;
  inset: -1.5rem;
  pointer-events: none;
  z-index: 0;
}
.presentation__frame-corner {
  position: absolute;
  width: 90px;
  height: auto;
  opacity: 0.45;
  filter: drop-shadow(0 0 10px rgba(239, 201, 103, 0.5));
}
.presentation__frame-corner--tl { top: 0;    left: 0;   }
.presentation__frame-corner--tr { top: 0;    right: 0;  transform: scaleX(-1); }
.presentation__frame-corner--bl { bottom: 0; left: 0;   transform: scaleY(-1); }
.presentation__frame-corner--br { bottom: 0; right: 0;  transform: scale(-1, -1); }
.presentation__text, .presentation__portrait { position: relative; z-index: 1; }

@media (max-width: 640px) {
  .presentation__frame-corner { width: 55px; opacity: 0.4; }
}

@media (min-width: 960px) {
  .presentation__frame-corner { width: 130px; opacity: 0.5; }
}

/* Dialogue lines inside articles - rendered as indented paragraphs with literal dash */
.dialogue {
  margin: 0.1rem 0 0.2rem;
  padding-left: 1.4rem;
  text-indent: -1.4rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
}
.dialogue + .dialogue {
  margin-top: 0.2rem;
}


/* Header ornaments + stardust effect for the navigation band */
.site-header { position: relative; overflow: hidden; }
.site-header__inner { position: relative; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 20%,  rgba(239, 201, 103, 0.85), transparent 60%),
    radial-gradient(1px 1px   at 22% 60%,  rgba(255, 255, 255, 0.6),  transparent 60%),
    radial-gradient(2px 2px   at 35% 30%,  rgba(239, 201, 103, 0.75), transparent 60%),
    radial-gradient(1px 1px   at 48% 80%,  rgba(212, 167, 58, 0.7),   transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 25%, rgba(255, 255, 255, 0.7),  transparent 60%),
    radial-gradient(1px 1px   at 72% 65%,  rgba(239, 201, 103, 0.8),  transparent 60%),
    radial-gradient(2px 2px   at 85% 35%,  rgba(212, 167, 58, 0.85),  transparent 60%),
    radial-gradient(1px 1px   at 93% 75%,  rgba(255, 255, 255, 0.6),  transparent 60%),
    radial-gradient(1.5px 1.5px at 15% 45%, rgba(239, 201, 103, 0.7),  transparent 60%),
    radial-gradient(1px 1px   at 42% 55%,  rgba(212, 167, 58, 0.65),  transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  animation: stardustTwinkle 6s ease-in-out infinite alternate;
}
.site-header > * { position: relative; z-index: 1; }

.header-orn {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(239, 201, 103, 0.65));
}
.header-orn--sparkle-1 {
  top: -10px;
  right: 25%;
  width: 60px;
  animation: pornFloat 14s ease-in-out infinite;
}
.header-orn--sparkle-2 {
  bottom: -10px;
  left: 30%;
  width: 50px;
  opacity: 0.38;
  animation: pornFloat 17s ease-in-out infinite reverse;
}
.header-orn--papillon {
  top: 8px;
  right: 5%;
  width: 38px;
  opacity: 0.7;
  animation: pornFloat 11s ease-in-out infinite;
  animation-delay: 0.5s;
}

@keyframes stardustTwinkle {
  0%   { opacity: 0.6; }
  100% { opacity: 0.95; }
}

@media (max-width: 640px) {
  /* Boost visibility on mobile - the header block was looking bare */
  .header-orn--sparkle-1 { width: 45px; opacity: 0.49; right: 35%; }
  .header-orn--sparkle-2 { width: 40px; opacity: 0.45; left: 15%; }
  .header-orn--papillon { width: 30px; opacity: 0.75; }
  .site-header::before { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before, .header-orn { animation: none !important; }
}


/* Extra header ornaments: flying gold key + 2 fine gold orchids */
.header-orn--cle {
  top: 4px;
  left: 38%;
  width: 42px;
  opacity: 0.052;
  animation: pornFloat 13s ease-in-out infinite;
  animation-delay: 1s;
}
.header-orn--orchidee-1 {
  top: -6px;
  left: 18%;
  width: 55px;
  opacity: 0.5;
  filter: drop-shadow(0 0 6px rgba(239, 201, 103, 0.7));
  animation: pornDrift 22s ease-in-out infinite alternate;
}
.header-orn--orchidee-2 {
  bottom: -6px;
  right: 18%;
  width: 50px;
  opacity: 0.48;
  filter: drop-shadow(0 0 6px rgba(239, 201, 103, 0.7));
  animation: pornDrift 26s ease-in-out infinite alternate-reverse;
}

@media (max-width: 640px) {
  .header-orn--cle { width: 30px; opacity: 0.06; left: 50%; }
  .header-orn--orchidee-1 { width: 38px; opacity: 0.6; left: 5%; }
  .header-orn--orchidee-2 { width: 38px; opacity: 0.6; right: 5%; }
}

/* Mandala ornaments around the presentation section (4 sides) */
.presentation__frame-side {
  position: absolute;
  pointer-events: none;
  opacity: 0.40;
  filter: drop-shadow(0 0 10px rgba(239, 201, 103, 0.55));
}
.presentation__frame-side--top   { top: -3rem;   left: 50%; transform: translateX(-50%); width: 110px; }
.presentation__frame-side--bot   { bottom: -3rem; left: 50%; transform: translateX(-50%); width: 110px; }
.presentation__frame-side--left  { top: 50%;     left: -2.5rem;  transform: translateY(-50%); width: 90px; }
.presentation__frame-side--right { top: 50%;     right: -2.5rem; transform: translateY(-50%); width: 90px; }

@media (max-width: 640px) {
  .presentation__frame-side--top { width: 70px; top: -2rem; }
  .presentation__frame-side--bot { width: 70px; bottom: -2rem; }
  .presentation__frame-side--left,
  .presentation__frame-side--right { width: 55px; opacity: 0.45; }
  .presentation__frame-side--left  { left: -1rem; }
  .presentation__frame-side--right { right: -1rem; }
}

@media (min-width: 960px) {
  .presentation__frame-side--top  { width: 140px; }
  .presentation__frame-side--bot  { width: 140px; }
  .presentation__frame-side--left { width: 120px; }
  .presentation__frame-side--right { width: 120px; }
}

/* Intro block for category landing pages */
.section-intro {
  max-width: var(--reading-width);
  margin: 0 auto var(--space-6);
  padding: 0 var(--space-3);
  font-family: var(--font-sans);
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink-muted);
}
.section-intro p {
  margin: 0 0 var(--space-3);
}
.section-intro__outro {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold-2);
  text-align: center;
  margin-top: var(--space-4);
}

/* External link pills at the end of an article */
.text-page__links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  margin: var(--space-5) auto var(--space-4);
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(212, 167, 58, 0.2);
}
.text-page__link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.6rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--flame-2);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 166, 77, 0.4);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.text-page__link-pill:hover, .text-page__link-pill:focus-visible {
  transform: translateY(-2px);
  color: #fff;
  background: rgba(255, 107, 26, 0.25);
  border-color: var(--flame-2);
  outline: none;
}

/* ========================================================================
   BOOK BURGER MENU - replaces the horizontal nav with a closed book that
   opens to reveal the menu items as if its pages were turning.
   Pure CSS, no JS, no external libs.
   ======================================================================== */

/* Hide the checkbox visually but keep it accessible */
.book-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.book-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 44px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms ease;
}

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

/* The closed book — 3D-ish shape with covers + spine + pages stack */
.book {
  position: relative;
  width: 52px;
  height: 36px;
  perspective: 240px;
  transform-style: preserve-3d;
  display: inline-block;
}

.book__cover {
  position: absolute;
  top: 0;
  width: 24px;
  height: 36px;
  background: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--flame-1) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  border-radius: 2px 4px 4px 2px;
  transform-origin: right center;
  transition: transform 600ms cubic-bezier(.7,-0.2,.3,1.2);
}

.book__cover--left  { left: 0;                  border-radius: 4px 2px 2px 4px; transform-origin: right center; }
.book__cover--right { right: 0; left: auto;     border-radius: 2px 4px 4px 2px; transform-origin: left center; }

.book__spine {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 36px;
  margin-left: -2px;
  background: linear-gradient(180deg, var(--flame-1), var(--gold-1));
  box-shadow: 0 0 4px rgba(255, 107, 26, 0.5);
}

.book__page {
  position: absolute;
  left: 50%;
  top: 3px;
  width: 22px;
  height: 30px;
  background: var(--paper);
  border-radius: 1px 2px 2px 1px;
  transform-origin: left center;
  opacity: 0;
  transform: rotateY(-2deg);
  transition: transform 700ms ease, opacity 400ms ease;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.08);
}
.book__page--1 { margin-left: -22px; transform-origin: right center; }
.book__page--2 { margin-left: 0; }
.book__page--3 { margin-left: 0; }

/* The deployable menu — starts hidden */
.book-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(5, 11, 30, 0.95) 0%, rgba(10, 26, 63, 0.95) 100%);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(212, 167, 58, 0.35);
  border-bottom: 1px solid rgba(212, 167, 58, 0.25);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition:
    max-height 500ms cubic-bezier(.7,-0.05,.3,1.05),
    opacity 350ms ease,
    transform 350ms ease;
  z-index: 9;
}

.book-menu__list {
  list-style: none;
  margin: 0;
  padding: var(--space-4) var(--space-3);
  display: grid;
  gap: var(--space-2) var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: var(--content-width);
  margin-left: auto;
  margin-right: auto;
}

.book-menu__list a {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  text-align: center;
  border: 1px solid rgba(212, 167, 58, 0.25);
  border-radius: var(--radius-md);
  background: rgba(17, 37, 79, 0.5);
  letter-spacing: 0.02em;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, color 200ms ease;
}
.book-menu__list a:hover,
.book-menu__list a:focus-visible {
  background: rgba(255, 107, 26, 0.18);
  border-color: var(--gold-2);
  color: var(--gold-2);
  transform: translateY(-2px);
  outline: none;
}

/* ========== OPEN STATE ========== */
.book-toggle:checked ~ .book-btn .book__cover--left  { transform: rotateY(-160deg); }
.book-toggle:checked ~ .book-btn .book__cover--right { transform: rotateY(160deg); }
.book-toggle:checked ~ .book-btn .book__page--1 { opacity: 1; transform: rotateY(-140deg); transition-delay: 80ms; }
.book-toggle:checked ~ .book-btn .book__page--2 { opacity: 1; transform: rotateY(0deg);    transition-delay: 160ms; }
.book-toggle:checked ~ .book-btn .book__page--3 { opacity: 1; transform: rotateY(120deg);  transition-delay: 240ms; }
.book-toggle:checked ~ .book-btn .book__spine    { background: var(--gold-2); }

.book-toggle:checked ~ .book-menu {
  max-height: 70vh;
  opacity: 1;
  transform: translateY(0);
}

/* Focus ring */
.book-toggle:focus-visible ~ .book-btn { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 4px; }

/* Visually-hidden utility (if not already defined) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile: book a bit smaller, menu items stack vertically */
@media (max-width: 640px) {
  .book-btn { width: 50px; height: 38px; }
  .book { width: 44px; height: 30px; }
  .book__cover { width: 20px; height: 30px; }
  .book__spine { height: 30px; }
  .book__page { width: 18px; height: 24px; }
  .book__page--1 { margin-left: -18px; }
  .book-menu__list { grid-template-columns: 1fr; }
}

/* Hide the OLD nav rules if they still exist */
.site-nav__list { display: none; }

/* ========================================================================
   GRIMOIRE BURGER MENU v2 — the closed book is a dark mysterious grimoire,
   when opened it expands and reveals the menu items WRITTEN on its pages.
   Pure CSS, no JS.
   ======================================================================== */

/* Reset old book CSS to avoid conflicts */
.book, .book__cover, .book__spine, .book__page { all: unset; }

/* Hide checkbox (still focusable for keyboard) */
.book-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* Backdrop behind the open book */
.book-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 11, 30, 0.78);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  transition: opacity 350ms ease;
  cursor: pointer;
}

.book-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 60;
  transition: transform 200ms ease;
}
.book-btn:hover { transform: scale(1.04); }

/* === The grimoire (closed by default) === */
.grimoire {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 48px;
  perspective: 320px;
  transform-style: preserve-3d;
  transition:
    width 600ms cubic-bezier(.6,-0.1,.3,1.1),
    height 600ms cubic-bezier(.6,-0.1,.3,1.1);
}

.grimoire__cover {
  position: absolute;
  top: 0;
  width: 30px;
  height: 48px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(135deg, #2b0f08 0%, #4a1e0d 45%, #2a0d05 100%);
  border: 1px solid rgba(212, 167, 58, 0.4);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 0 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 167, 58, 0.15);
  transform-origin: right center;
  transition: transform 700ms cubic-bezier(.7,-0.2,.3,1.15);
  border-radius: 2px 3px 3px 2px;
  overflow: hidden;
}
.grimoire__cover--left  { left: 0;  border-radius: 3px 2px 2px 3px; transform-origin: right center; }
.grimoire__cover--right { right: 0; transform-origin: left center; }

/* Gold ornament on the cover (corner flourish) */
.grimoire__ornement {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid var(--gold-2);
  border-left: 1.5px solid var(--gold-2);
  opacity: 0.85;
}
.grimoire__ornement::after {
  content: "";
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-bottom: 1.5px solid var(--gold-2);
  border-right: 1.5px solid var(--gold-2);
}
.grimoire__ornement--right {
  left: auto;
  right: 4px;
  border-top: 1.5px solid var(--gold-2);
  border-right: 1.5px solid var(--gold-2);
  border-left: none;
}
.grimoire__ornement--right::after {
  left: 4px;
  right: auto;
  border-left: 1.5px solid var(--gold-2);
  border-right: none;
  border-bottom: 1.5px solid var(--gold-2);
}

/* The word "Menu" on the cover */
.grimoire__label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  color: var(--gold-2);
  text-transform: uppercase;
  font-weight: 600;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  opacity: 0.9;
  transition: opacity 300ms;
}

.grimoire__spine {
  position: absolute;
  left: 50%;
  top: 0;
  width: 4px;
  height: 100%;
  margin-left: -2px;
  background: linear-gradient(180deg, var(--gold-1) 0%, #6b3414 50%, var(--gold-1) 100%);
  box-shadow: 0 0 6px rgba(212, 167, 58, 0.35), inset 0 0 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition: width 500ms;
}

/* === The inner pages (hidden when closed) === */
.grimoire__pages {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease 200ms;
}

.grimoire__page {
  position: relative;
  flex: 1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 167, 58, 0.06), transparent 60%),
    linear-gradient(180deg, #f3e7c8 0%, #e6d5a8 100%);
  box-shadow: inset 0 0 30px rgba(120, 85, 30, 0.18);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  border-top: 1px solid rgba(120, 80, 30, 0.25);
  border-bottom: 1px solid rgba(120, 80, 30, 0.25);
  pointer-events: auto;
}
.grimoire__page--left  { border-left:  1px solid rgba(120, 80, 30, 0.25); box-shadow: inset -8px 0 16px rgba(120, 80, 30, 0.18); }
.grimoire__page--right { border-right: 1px solid rgba(120, 80, 30, 0.25); box-shadow: inset 8px 0 16px rgba(120, 80, 30, 0.18); }

.grimoire__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: center;
}
.grimoire__list a {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #3a1f10;
  text-decoration: none;
  letter-spacing: 0.04em;
  border-bottom: 1px solid transparent;
  padding: 0.5rem 0.4rem;
  transition: color 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.grimoire__list a:hover,
.grimoire__list a:focus-visible {
  color: var(--flame-1);
  border-color: rgba(212, 167, 58, 0.6);
  transform: translateX(4px);
  outline: none;
}

/* === OPEN STATE === */
.book-toggle:checked ~ .book-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.book-toggle:checked ~ .book-btn {
  /* Move button out of the header flow visually by expanding inside it */
  position: relative;
}

.book-toggle:checked ~ .book-btn .grimoire {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(640px, 92vw);
  height: min(420px, 70vh);
  perspective: 1800px;
  z-index: 60;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.book-toggle:checked ~ .book-btn .grimoire__cover--left  { transform: rotateY(-170deg); }
.book-toggle:checked ~ .book-btn .grimoire__cover--right { transform: rotateY(170deg); }
.book-toggle:checked ~ .book-btn .grimoire__cover { width: 50%; height: 100%; transition-delay: 0ms; }
.book-toggle:checked ~ .book-btn .grimoire__spine { width: 6px; }
.book-toggle:checked ~ .book-btn .grimoire__label { opacity: 0; transition-delay: 0ms; }
.book-toggle:checked ~ .book-btn .grimoire__pages { opacity: 1; }

/* Focus ring on the label for keyboard */
.book-toggle:focus-visible ~ .book-btn {
  outline: 2px solid var(--gold-2);
  outline-offset: 6px;
  border-radius: 6px;
}

/* Mobile: open book takes more of the screen */
@media (max-width: 640px) {
  .grimoire { width: 50px; height: 38px; }
  .grimoire__cover { width: 23px; }
  .grimoire__ornement { width: 6px; height: 6px; }
  .grimoire__ornement::after { width: 4px; height: 4px; }
  .grimoire__label { font-size: 0.42rem; }

  .book-toggle:checked ~ .book-btn .grimoire {
    width: 94vw;
    height: 78vh;
  }
  .grimoire__page { padding: 1.5rem 1rem; }
  .grimoire__list a { font-size: 1.25rem; }
}

/* Hide leftover old nav rules just in case */
.site-nav__list, .book-menu, .book-menu__list { display: none !important; }

/* Visually-hidden utility (might already exist) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Lock body scroll when menu is open */
.book-toggle:checked ~ * .grimoire { /* placeholder */ }
.book-toggle:checked ~ .book-backdrop { position: fixed; }
.book-toggle:checked + .book-btn { overflow: visible; }

/* ========================================================================
   GRIMOIRE MENU v2 — clean modal pattern:
   - Closed: small dark grimoire icon in header (.grimoire-trigger)
   - Open: full-screen overlay with large centered book (.grimoire-modal)
   ======================================================================== */

/* Reset old book/grimoire rules to avoid conflicts */
.book, .book__cover, .book__spine, .book__page, .book-menu, .book-menu__list,
.book-btn, .book-backdrop, .grimoire-trigger .grimoire__pages, .grimoire-trigger .grimoire__page,
.grimoire-trigger .grimoire__list { all: revert; }

/* Hide the checkbox */
.book-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* === Closed icon === */
.grimoire-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 4px;
  border-radius: 6px;
  transition: transform 200ms ease;
}
.grimoire-trigger:hover { transform: scale(1.05); }
.book-toggle:focus-visible ~ .grimoire-trigger { outline: 2px solid var(--gold-2); outline-offset: 4px; }

.grimoire--icon {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 44px;
}

.grimoire__cover {
  position: absolute;
  top: 0;
  width: 28px;
  height: 44px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(135deg, #2b0f08 0%, #4a1e0d 45%, #2a0d05 100%);
  border: 1px solid rgba(212, 167, 58, 0.42);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.6),
    inset 0 0 12px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(212, 167, 58, 0.15);
  border-radius: 3px;
  overflow: hidden;
}
.grimoire__cover--left  { left: 0;  border-radius: 4px 2px 2px 4px; }
.grimoire__cover--right { right: 0; border-radius: 2px 4px 4px 2px; }

.grimoire__ornement {
  position: absolute; top: 4px; left: 4px;
  width: 8px; height: 8px;
  border-top: 1.5px solid var(--gold-2);
  border-left: 1.5px solid var(--gold-2);
}
.grimoire__ornement::after {
  content: ""; position: absolute; bottom: -34px; right: -16px;
  width: 6px; height: 6px;
  border-bottom: 1.5px solid var(--gold-2);
  border-right: 1.5px solid var(--gold-2);
}
.grimoire__ornement--right {
  left: auto; right: 4px;
  border-top: 1.5px solid var(--gold-2);
  border-right: 1.5px solid var(--gold-2);
  border-left: none;
}
.grimoire__ornement--right::after {
  left: -16px; right: auto;
  border-left: 1.5px solid var(--gold-2);
  border-right: none;
  border-bottom: 1.5px solid var(--gold-2);
}

.grimoire__spine {
  position: absolute;
  left: 50%; top: 0;
  width: 4px; height: 44px;
  margin-left: -2px;
  background: linear-gradient(180deg, var(--gold-2) 0%, #6b3414 50%, var(--gold-2) 100%);
  box-shadow: 0 0 4px rgba(212, 167, 58, 0.35), inset 0 0 3px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.grimoire__label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  font-size: 0.45rem;
  letter-spacing: 0.12em;
  color: var(--gold-2);
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
  z-index: 2;
}

/* === Modal overlay (hidden by default) === */
.grimoire-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms ease;
}

.grimoire-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 30, 0.88);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.grimoire-modal__book {
  position: relative;
  width: min(560px, 92vw);
  max-height: min(560px, 88vh);
  transform: scale(0.4) rotate(-3deg);
  opacity: 0;
  transition: transform 500ms cubic-bezier(.5, -0.05, .3, 1.15), opacity 350ms ease;
}

.grimoire-modal__inner {
  display: grid;
  grid-template-columns: 28px 1fr 28px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 167, 58, 0.08), transparent 60%),
    linear-gradient(180deg, #f3e7c8 0%, #e6d5a8 100%);
  border-radius: 4px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 0 40px rgba(120, 85, 30, 0.25);
  overflow: hidden;
  border: 1px solid rgba(120, 85, 30, 0.4);
}

.grimoire-modal__cover {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.05), transparent 60%),
    linear-gradient(135deg, #2b0f08 0%, #4a1e0d 50%, #2a0d05 100%);
  border-right: 2px solid rgba(212, 167, 58, 0.35);
  box-shadow: inset -3px 0 8px rgba(0, 0, 0, 0.5);
  position: relative;
}
.grimoire-modal__cover--left::before,
.grimoire-modal__cover--right::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 6px;
  right: 6px;
  bottom: 12px;
  border: 1.5px solid rgba(212, 167, 58, 0.55);
  border-radius: 2px;
}
.grimoire-modal__cover--right {
  border-right: none;
  border-left: 2px solid rgba(212, 167, 58, 0.35);
  box-shadow: inset 3px 0 8px rgba(0, 0, 0, 0.5);
}

.grimoire-modal__page {
  padding: 1.8rem 1.5rem 2rem;
  text-align: center;
  position: relative;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(120, 85, 30, 0.18), transparent 70%),
    linear-gradient(180deg, transparent 0%, transparent 100%);
}
.grimoire-modal__page::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(120, 85, 30, 0.2);
}

.grimoire-modal__title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6b3414;
  margin: 0 0 1rem;
  font-weight: 600;
}
.grimoire-modal__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--gold-1);
  margin: 0.5rem auto 0;
  opacity: 0.6;
}

.grimoire-modal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.grimoire-modal__list a {
  display: block;
  padding: 0.7rem 1rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: #3a1f10;
  text-decoration: none;
  letter-spacing: 0.04em;
  border-radius: 4px;
  transition: color 200ms ease, background 200ms ease, transform 200ms ease;
}
.grimoire-modal__list a:hover,
.grimoire-modal__list a:focus-visible {
  color: var(--flame-1);
  background: rgba(212, 167, 58, 0.12);
  transform: translateX(3px);
  outline: none;
}

.grimoire-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--ink);
  background: var(--night-3);
  border: 1px solid rgba(212, 167, 58, 0.5);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  z-index: 2;
  font-family: var(--font-sans);
  user-select: none;
  transition: transform 200ms ease, color 200ms ease;
}
.grimoire-modal__close:hover { transform: rotate(90deg); color: var(--flame-2); }

/* === Open state === */
.book-toggle:checked ~ .grimoire-modal {
  opacity: 1;
  pointer-events: auto;
}
.book-toggle:checked ~ .grimoire-modal .grimoire-modal__book {
  transform: scale(1) rotate(0);
  opacity: 1;
  transition-delay: 80ms;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .grimoire--icon { width: 50px; height: 38px; }
  .grimoire__cover { width: 23px; height: 38px; }
  .grimoire__spine { height: 38px; }
  .grimoire__label { font-size: 0.4rem; }

  .grimoire-modal__inner { grid-template-columns: 10px 1fr 10px; }
  .grimoire-modal__page { padding: 1.2rem 0.8rem 1.4rem; }
  .grimoire-modal__title { font-size: 1.05rem; margin-bottom: 0.6rem; letter-spacing: 0.14em; }
  .grimoire-modal__list a { font-size: 1.05rem; padding: 0.32rem 0.4rem; }
  .grimoire-modal__close { top: -14px; right: -14px; width: 32px; height: 32px; font-size: 1.3rem; }
  .grimoire-modal__page::before { display: none; }
}

/* Body scroll lock when modal is open (best-effort CSS) */
.book-toggle:checked ~ * { /* visual cue only */ }

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

/* Hide site-nav vestiges */
.site-nav__list, .book-menu__list { display: none !important; }

/* ========================================================================
   GRIMOIRE v3 — MOBILE-ONLY burger book + full-width sheet menu.
   Desktop keeps the horizontal nav.
   ======================================================================== */

/* Hide all previous grimoire/book styles so they don't conflict */
.grimoire, .grimoire--icon, .grimoire-trigger, .grimoire-modal,
.grimoire-modal__backdrop, .grimoire-modal__book, .grimoire-modal__inner,
.grimoire-modal__cover, .grimoire-modal__page, .grimoire-modal__title,
.grimoire-modal__list, .grimoire-modal__close,
.grimoire__cover, .grimoire__spine, .grimoire__pages, .grimoire__page,
.grimoire__list, .grimoire__ornement, .grimoire__label,
.book, .book__cover, .book__spine, .book__page, .book-menu, .book-menu__list,
.book-btn, .book-backdrop { all: revert; display: none !important; }

/* Hide checkbox */
.book-toggle {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Restore desktop horizontal nav visibility */
.site-nav__list { display: flex !important; }

/* === Mobile-only book burger === */
.book-trigger {
  display: none; /* hidden on desktop */
}

/* GLOBAL: hide menu-sheet on desktop (only shown via @media mobile) */
.menu-sheet { display: none; }

@media (max-width: 1024px) {
  /* Hide horizontal nav on mobile */
  .site-nav { display: none; }

  /* Show book trigger */
  .book-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 48px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 70;
  }

  .book-icon {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 36px;
  }

  /* Fairy dust around the book */
  .book-icon__dust {
    position: absolute;
    inset: -8px -10px;
    pointer-events: none;
    background-image:
      radial-gradient(1.5px 1.5px at 10% 30%, rgba(239, 201, 103, 0.95), transparent 60%),
      radial-gradient(1px 1px at 90% 25%, rgba(255, 255, 255, 0.85), transparent 60%),
      radial-gradient(1.5px 1.5px at 15% 80%, rgba(212, 167, 58, 0.85), transparent 60%),
      radial-gradient(1px 1px at 85% 85%, rgba(239, 201, 103, 0.95), transparent 60%),
      radial-gradient(2px 2px at 50% 8%, rgba(255, 244, 200, 0.9), transparent 60%),
      radial-gradient(1px 1px at 5% 55%, rgba(239, 201, 103, 0.85), transparent 60%),
      radial-gradient(1px 1px at 96% 60%, rgba(212, 167, 58, 0.8), transparent 60%),
      radial-gradient(1.5px 1.5px at 50% 96%, rgba(255, 255, 255, 0.75), transparent 60%);
    animation: dust-twinkle 4s ease-in-out infinite alternate;
    border-radius: 50%;
  }

  @keyframes dust-twinkle {
    0%   { opacity: 0.55; transform: scale(0.95); }
    100% { opacity: 1;    transform: scale(1.05); }
  }

  /* The book shape: side-profile view of an OPEN book */
  .book-icon__shape {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    perspective: 200px;
  }

  /* Pages (cream paper) underneath - shown peeking out the sides as if book is open */
  .book-icon__page {
    position: absolute;
    top: 5px;
    bottom: 5px;
    width: 20px;
    background: linear-gradient(180deg, #f3e7c8, #e6d5a8);
    box-shadow: inset 0 0 4px rgba(120, 85, 30, 0.25);
  }
  .book-icon__page--back  { left: 2px;  border-radius: 2px 0 0 2px; transform: skewY(-3deg); }
  .book-icon__page--front { right: 2px; border-radius: 0 2px 2px 0; transform: skewY(3deg); }

  /* Covers - dark grimoire leather, in profile view (slanted) */
  .book-icon__cover-left,
  .book-icon__cover-right {
    position: absolute;
    top: 2px;
    bottom: 2px;
    width: 20px;
    background:
      radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.07), transparent 60%),
      linear-gradient(135deg, #2b0f08 0%, #4a1e0d 45%, #2a0d05 100%);
    border: 1px solid rgba(212, 167, 58, 0.45);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55);
  }
  .book-icon__cover-left  { left: 0;  border-radius: 3px 1px 1px 3px; transform: rotateY(-25deg); transform-origin: right; }
  .book-icon__cover-right { right: 0; border-radius: 1px 3px 3px 1px; transform: rotateY(25deg);  transform-origin: left;  }

  /* Spine at the bottom center connecting both covers (V shape) */
  .book-icon__spine {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 12px;
    height: 4px;
    margin-left: -6px;
    background: linear-gradient(90deg, #6b3414, var(--gold-1), #6b3414);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 4px rgba(212, 167, 58, 0.45);
  }

  .book-trigger:hover .book-icon { transform: scale(1.04); }
  .book-toggle:focus-visible ~ .book-trigger { outline: 2px solid var(--gold-2); outline-offset: 4px; border-radius: 8px; }

  /* === The sheet (shown on mobile only) === */
  .menu-sheet { display: block;
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transition: opacity 250ms ease;
  }
  .menu-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 11, 30, 0.85);
    backdrop-filter: blur(6px);
    cursor: pointer;
  }
  .menu-sheet__panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--night-2) 0%, var(--night-1) 100%);
    border-bottom: 2px solid var(--gold-1);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6);
    transform: translateY(-100%);
    transition: transform 380ms cubic-bezier(.6, -0.05, .3, 1.05);
    padding-bottom: var(--space-4);
  }
  .menu-sheet__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-4);
    border-bottom: 1px solid rgba(212, 167, 58, 0.25);
  }
  .menu-sheet__title {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-2);
    margin: 0;
    font-weight: 600;
  }
  .menu-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 2rem;
    line-height: 1;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid rgba(212, 167, 58, 0.45);
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: transform 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  .menu-sheet__close:hover { transform: rotate(90deg); color: var(--flame-2); border-color: var(--gold-2); }

  .menu-sheet__list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-3) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .menu-sheet__list a {
    display: block;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-serif);
    font-size: 1.4rem;
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    border: 1px solid rgba(212, 167, 58, 0.25);
    border-radius: var(--radius-md);
    background: rgba(17, 37, 79, 0.5);
    transition: color 200ms ease, background 200ms ease, border-color 200ms ease;
  }
  .menu-sheet__list a:hover,
  .menu-sheet__list a:focus-visible {
    color: var(--gold-2);
    background: rgba(255, 107, 26, 0.18);
    border-color: var(--gold-2);
    outline: none;
  }

  /* OPEN STATE */
  .book-toggle:checked ~ .menu-sheet {
    opacity: 1;
    pointer-events: auto;
  }
  .book-toggle:checked ~ .menu-sheet .menu-sheet__panel {
    transform: translateY(0);
  }
}

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


/* =============================================================
   MENU-SHEET OVERRIDE — final correct implementation
   Mobile only, full-screen overlay with all menu items visible
   ============================================================= */

/* Hide on desktop with high specificity */
body .menu-sheet { display: none; }

@media (max-width: 1024px) {
  body .menu-sheet {
    display: block;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 260ms ease;
  }

  body .menu-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(5, 11, 30, 0.96) 0%,
      rgba(10, 26, 63, 0.96) 100%);
    backdrop-filter: blur(10px);
    cursor: pointer;
  }

  body .menu-sheet__panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none !important;
  }

  body .menu-sheet__header {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.4rem 1.4rem 1rem;
    border-bottom: 1px solid rgba(212, 167, 58, 0.25);
  }

  body .menu-sheet__title {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-2);
    margin: 0;
    font-weight: 600;
  }

  body .menu-sheet__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    font-size: 2rem;
    line-height: 1;
    color: var(--ink);
    background: transparent;
    border: 1.5px solid rgba(212, 167, 58, 0.45);
    border-radius: 50%;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: transform 200ms ease, color 200ms ease, border-color 200ms ease;
  }
  body .menu-sheet__close:hover {
    transform: rotate(90deg);
    color: var(--flame-2);
    border-color: var(--gold-2);
  }

  body .menu-sheet nav {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
  }

  body .menu-sheet__list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  body .menu-sheet__list li {
    width: 100%;
  }

  body .menu-sheet__list a {
    display: block;
    width: 100%;
    padding: 1rem 1.4rem;
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--ink);
    text-decoration: none;
    text-align: center;
    border: 1px solid rgba(212, 167, 58, 0.32);
    border-radius: var(--radius-md);
    background: rgba(17, 37, 79, 0.55);
    transition: color 220ms ease, background 220ms ease, border-color 220ms ease, transform 220ms ease;
  }
  body .menu-sheet__list a:hover,
  body .menu-sheet__list a:focus-visible,
  body .menu-sheet__list a:active {
    color: var(--gold-2);
    background: rgba(255, 107, 26, 0.22);
    border-color: var(--gold-2);
    transform: translateY(-2px);
    outline: none;
  }

  /* OPEN STATE */
  .book-toggle:checked ~ .menu-sheet {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* =============================================================
   FORCE menu-sheet to render properly when checked - no media query
   ============================================================= */
.book-toggle:checked ~ .menu-sheet,
html .book-toggle:checked ~ .menu-sheet {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.book-toggle:checked ~ .menu-sheet .menu-sheet__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(5, 11, 30, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  display: block !important;
}

.book-toggle:checked ~ .menu-sheet .menu-sheet__panel {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  transform: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.book-toggle:checked ~ .menu-sheet .menu-sheet__header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 1.4rem !important;
  border-bottom: 1px solid rgba(212, 167, 58, 0.25) !important;
  flex: 0 0 auto !important;
}

.book-toggle:checked ~ .menu-sheet nav {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem !important;
}

.book-toggle:checked ~ .menu-sheet .menu-sheet__list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 360px !important;
}

.book-toggle:checked ~ .menu-sheet .menu-sheet__list li {
  display: block !important;
  list-style: none !important;
}

.book-toggle:checked ~ .menu-sheet .menu-sheet__list a {
  display: block !important;
  padding: 1rem 1.4rem !important;
  font-family: var(--font-serif) !important;
  font-size: 1.5rem !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  text-align: center !important;
  border: 1px solid rgba(212, 167, 58, 0.35) !important;
  border-radius: var(--radius-md) !important;
  background: rgba(17, 37, 79, 0.6) !important;
}


/* =============================================================
   GRIMOIRE BURGER v4 — PNG illustré + label "Menu" + animation
   ============================================================= */
@media (max-width: 1024px) {
  body .book-trigger {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    width: auto !important;
    height: auto !important;
    padding: 4px 6px !important;
    cursor: pointer !important;
    position: relative !important;
  }

  /* hide my old CSS-drawn book components */
  body .book-icon { display: none !important; }

  body .book-trigger__label {
    font-family: var(--font-serif);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-2);
    text-shadow: 0 0 6px rgba(212, 167, 58, 0.5);
    line-height: 1;
    margin-bottom: 2px;
  }

  body .book-trigger__img {
    width: 60px;
    height: auto;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55))
            drop-shadow(0 0 8px rgba(239, 201, 103, 0.45));
    transition: transform 280ms cubic-bezier(.5, -0.2, .3, 1.4),
                filter 280ms ease;
  }

  /* Tap animation: book lifts + glows */
  body .book-trigger:active .book-trigger__img,
  body .book-toggle:checked ~ header .book-trigger .book-trigger__img,
  body .book-toggle:checked + .book-trigger .book-trigger__img {
    transform: scale(1.18) rotate(-3deg) translateY(-3px);
    filter: drop-shadow(0 8px 18px rgba(255, 107, 26, 0.5))
            drop-shadow(0 0 16px rgba(239, 201, 103, 0.85));
  }

  /* Fairy dust around the icon (CSS particles) */
  body .book-trigger::before,
  body .book-trigger::after {
    content: "";
    position: absolute;
    inset: -6px -8px;
    pointer-events: none;
    background-image:
      radial-gradient(1.5px 1.5px at 12% 25%, rgba(239, 201, 103, 0.95), transparent 60%),
      radial-gradient(1px 1px   at 88% 30%, rgba(255, 255, 255, 0.85), transparent 60%),
      radial-gradient(1.5px 1.5px at 18% 75%, rgba(212, 167, 58, 0.85), transparent 60%),
      radial-gradient(1px 1px   at 85% 75%, rgba(239, 201, 103, 0.95), transparent 60%),
      radial-gradient(2px 2px at 50% 8%, rgba(255, 244, 200, 0.9), transparent 60%),
      radial-gradient(1px 1px at 95% 50%, rgba(212, 167, 58, 0.8), transparent 60%);
    animation: dust-twinkle 3.5s ease-in-out infinite alternate;
    border-radius: 30% 60% 40% 50%;
    z-index: -1;
  }
  body .book-trigger::after {
    animation-delay: 1.2s;
    transform: rotate(35deg);
    opacity: 0.7;
  }

  @keyframes dust-twinkle {
    0%   { opacity: 0.55; transform: scale(0.95); }
    100% { opacity: 1;    transform: scale(1.1); }
  }
}
@media (min-width: 1025px) {
  /* Desktop: hide trigger fully */
  body .book-trigger { display: none !important; }
}

/* =============================================================
   Compact menu list to avoid scrolling on small mobile viewports
   ============================================================= */
@media (max-width: 1024px) {
  body .menu-sheet__list {
    gap: 0.55rem !important;
    max-width: 280px !important;
  }
  body .menu-sheet__list a {
    padding: 0.75rem 1rem !important;
    font-size: 1.25rem !important;
    border-radius: 14px !important;
  }
  body .menu-sheet__header {
    padding: 1rem 1.2rem 0.8rem !important;
  }
  body .menu-sheet__title {
    font-size: 1.1rem !important;
    letter-spacing: 0.22em !important;
  }
  body .menu-sheet__close {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.6rem !important;
  }
}

/* Highest-specificity override for compact menu items (no scroll) */
@media (max-width: 1024px) {
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__list { gap: 0.5rem !important; max-width: 280px !important; }
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__list a {
    padding: 0.7rem 1rem !important;
    font-size: 1.2rem !important;
    border-radius: 12px !important;
  }
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__header { padding: 1rem 1.2rem 0.7rem !important; }
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__title { font-size: 1rem !important; }
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__close { width: 36px !important; height: 36px !important; font-size: 1.5rem !important; }
  html body .book-toggle:checked ~ .menu-sheet nav { padding: 0.5rem !important; }
}


/* =============================================================
   GRIMOIRE BURGER v5 — "MENU" text on the cover + opening animation
   ============================================================= */
@media (max-width: 1024px) {
  /* Remove the old separate "Menu" label above */
  html body .book-trigger__label { display: none !important; }

  html body .book-trigger__stage {
    position: relative;
    display: inline-block;
    perspective: 600px;
    transform-style: preserve-3d;
  }

  /* MENU text overlaid on the cover */
  html body .book-trigger__menu-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-58%, -52%) rotate(-2deg);
    font-family: var(--font-serif);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #5a2c0e;
    text-shadow:
      0 1px 0 rgba(255, 224, 150, 0.7),
      0 0 4px rgba(0, 0, 0, 0.45);
    font-weight: 700;
    pointer-events: none;
    z-index: 2;
    transition: opacity 250ms ease, transform 400ms ease;
  }

  /* Opening animation when clicked - the book "opens" */
  @keyframes book-open {
    0%   { transform: rotateY(0)    scale(1); }
    35%  { transform: rotateY(-25deg) scale(1.1) translateY(-4px); }
    65%  { transform: rotateY(-80deg) scale(1.18); filter: brightness(1.4); }
    100% { transform: rotateY(0)    scale(1); }
  }

  /* Sparkle burst effect when triggered */
  @keyframes book-sparkle-burst {
    0%   { opacity: 0; transform: scale(0.6); }
    40%  { opacity: 1; transform: scale(1.4); }
    100% { opacity: 0; transform: scale(1.8); }
  }

  /* Trigger animation on tap */
  html body .book-toggle:checked ~ header .book-trigger .book-trigger__stage,
  html body .book-toggle:checked + .book-trigger .book-trigger__stage,
  html body .book-trigger:active .book-trigger__stage {
    animation: book-open 700ms cubic-bezier(.5, -0.05, .3, 1.1);
  }

  /* Hide MENU label briefly during animation */
  html body .book-trigger:active .book-trigger__menu-text {
    opacity: 0;
    transform: translate(-58%, -52%) rotate(-2deg) scale(1.2);
  }

  /* Sparkle burst on tap */
  html body .book-trigger:active::after,
  html body .book-toggle:checked ~ header .book-trigger::after {
    animation: book-sparkle-burst 700ms ease-out;
  }
}

/* ===== Reposition MENU text properly framed on book cover ===== */
@media (max-width: 1024px) {
  html body .book-trigger__stage {
    position: relative !important;
    width: 72px !important;
    height: 48px !important;
    display: inline-block !important;
  }

  html body .book-trigger__menu-text {
    position: absolute !important;
    top: 38% !important;
    left: 44% !important;
    transform: translate(-50%, -50%) !important;
    font-family: var(--font-serif) !important;
    font-size: 0.55rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: #4a2410 !important;
    text-shadow:
      0 1px 0 rgba(255, 224, 150, 0.55),
      0 0 1px rgba(0, 0, 0, 0.6) !important;
    font-weight: 700 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    width: auto !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
}

/* ===== MENU text on book cover - perspective-aware, classy centered ===== */
@media (max-width: 1024px) {
  html body .book-trigger__img {
    transform: rotate(-3deg);
    transform-origin: center center;
  }
  html body .book-trigger__menu-text {
    top: 36% !important;
    left: 42% !important;
    transform: translate(-50%, -50%) rotate(-7deg) skew(-2deg, -3deg) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.18em !important;
    color: #3a1808 !important;
    text-shadow: 0 1px 0 rgba(255, 232, 170, 0.65), 0 0 1px rgba(0, 0, 0, 0.5) !important;
  }
}

/* ===== Style the new home-return link ===== */
.text-page__back--home {
  display: inline-block;
  margin-left: var(--space-3);
  color: var(--flame-2);
}
.text-page__back--home::before {
  content: "·";
  display: inline-block;
  margin-right: var(--space-3);
  margin-left: -0.6rem;
  color: var(--ink-faint);
}
@media (max-width: 640px) {
  .text-page__back--home {
    display: block;
    margin-left: 0;
    margin-top: 0.6rem;
  }
  .text-page__back--home::before { display: none; }
}

/* ===== Site-wide "Retour à laccueil" link below content (on all pages except home) ===== */
.page-back-home {
  max-width: var(--content-width);
  margin: var(--space-5) auto var(--space-7);
  padding: 0 var(--space-3);
  text-align: center;
}
.page-back-home__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--flame-2);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 166, 77, 0.4);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.page-back-home__link::before { content: "←"; display: inline-block; }
.page-back-home__link:hover,
.page-back-home__link:focus-visible {
  color: #fff;
  background: rgba(255, 107, 26, 0.24);
  border-color: var(--flame-2);
  transform: translateY(-2px);
  outline: none;
}

/* "What I think inside" variant for the comparison dialogues in Faire autiste */
.dialogue.dialogue--inside {
  padding-left: 2.4rem;
  text-indent: -1.4rem;
  color: var(--gold-2);
  font-style: italic;
  opacity: 0.9;
  margin-top: -0.1rem;
}
.dialogue.dialogue--inside em { font-style: inherit; }

/* Chibi portrait above article body */
.text-page__chibi {
  margin: 0 auto var(--space-4);
  max-width: 360px;
  text-align: center;
}
.text-page__chibi img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(212, 167, 58, 0.3),
    0 0 24px rgba(239, 201, 103, 0.18);
}
@media (min-width: 640px) {
  .text-page__chibi { max-width: 420px; }
}

/* ===========================================================
   BD Lightbox - click image to enlarge (CSS-only via :target)
   =========================================================== */

.bd-zoom-trigger {
  display: block;
  position: relative;
  cursor: zoom-in;
  text-decoration: none;
  color: inherit;
}
.bd-zoom-trigger img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 250ms ease, filter 250ms ease;
}
.bd-zoom-trigger:hover img,
.bd-zoom-trigger:focus-visible img {
  transform: scale(1.02);
  filter: brightness(1.06);
}

.bd-zoom-hint {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(5, 11, 30, 0.75);
  color: var(--gold-2);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(212, 167, 58, 0.4);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 200ms ease, transform 200ms ease;
  pointer-events: none;
}
.bd-zoom-trigger:hover .bd-zoom-hint,
.bd-zoom-trigger:focus-visible .bd-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox (hidden by default, shown via :target) */
.bd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  padding: 2rem;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms;
}
.bd-lightbox:target {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.bd-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 11, 30, 0.92);
  backdrop-filter: blur(10px);
  cursor: zoom-out;
  z-index: 1;
}

.bd-lightbox img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transform: scale(0.92);
  transition: transform 320ms cubic-bezier(.5, -0.05, .3, 1.1);
}
.bd-lightbox:target img {
  transform: scale(1);
}

.bd-lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
  background: rgba(5, 11, 30, 0.7);
  border: 1.5px solid rgba(212, 167, 58, 0.55);
  border-radius: 50%;
  text-decoration: none;
  z-index: 3;
  transition: transform 200ms ease, color 200ms ease, border-color 200ms ease;
}
.bd-lightbox__close:hover {
  transform: rotate(90deg);
  color: var(--flame-2);
  border-color: var(--gold-2);
}

@media (max-width: 640px) {
  .bd-lightbox { padding: 1rem; }
  .bd-lightbox__close { top: 0.7rem; right: 0.7rem; width: 38px; height: 38px; font-size: 1.4rem; }
  .bd-zoom-hint { font-size: 0.62rem; padding: 0.3rem 0.55rem; }
}

/* ===== Force lightbox image to fit viewport perfectly (no horizontal overflow) ===== */
html body .bd-lightbox {
  padding: 1rem !important;
  overflow: hidden !important;
}
html body .bd-lightbox img {
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100vh - 2rem) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
}
@media (max-width: 640px) {
  html body .bd-lightbox { padding: 0.5rem !important; }
  html body .bd-lightbox img {
    max-width: calc(100vw - 1rem) !important;
    max-height: calc(100vh - 1rem) !important;
  }
}

/* Footer Contact link */
.site-footer__contact {
  display: inline-block;
  margin-bottom: var(--space-3);
  padding: 0.5rem 1.2rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--flame-2);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 166, 77, 0.35);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.site-footer__contact:hover, .site-footer__contact:focus-visible {
  color: #fff;
  background: rgba(255, 107, 26, 0.24);
  border-color: var(--flame-2);
  transform: translateY(-2px);
  outline: none;
}

/* ===== Lightbox v2 - zoom to natural size + scroll, especially for desktop ===== */
@media (min-width: 641px) {
  html body .bd-lightbox {
    padding: 1rem !important;
    overflow: auto !important;
  }
  html body .bd-lightbox img {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
    cursor: zoom-out;
    margin: 0 auto !important;
    /* Display at natural size so user can scroll to read details */
  }
}

/* Mobile: keep fit-to-viewport for readability without scroll */
@media (max-width: 640px) {
  html body .bd-lightbox {
    overflow: auto !important;
  }
  html body .bd-lightbox img {
    max-width: none !important;
    max-height: none !important;
    width: auto !important;
    height: auto !important;
  }
}

/* ===== Final lightbox: fit-to-viewport + centered, never overflow ===== */
html body .bd-lightbox,
html body .bd-lightbox:target {
  padding: 1rem !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
@media (max-width: 640px) {
  html body .bd-lightbox,
  html body .bd-lightbox:target {
    padding: 0.5rem !important;
  }
}
html body .bd-lightbox img,
html body .bd-lightbox:target img {
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100vh - 2rem) !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  margin: 0 auto !important;
  display: block !important;
  cursor: zoom-out !important;
}


/* =============================================================
   V41: NAV SUBTITLES + HERO CLIENT PITCH + FOOTER EMAIL
   Feedback round 2026-06-04 (approved by Jenny: points 1, 2, 3)
   ============================================================= */

/* --- 1. Desktop nav: poetic name + small descriptive subtitle --- */
.site-nav__list a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  justify-content: center;
}

.site-nav__list .nav-label {
  line-height: 1.2;
}

.site-nav__list .nav-sub {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink-muted);
  opacity: 0.78;
  line-height: 1.25;
  max-width: 11em;
}

.site-nav__list a:hover .nav-sub,
.site-nav__list a:focus-visible .nav-sub {
  color: var(--gold-2);
  opacity: 1;
}

/* Project link: subtle gold emphasis to surface the client offer */
.site-nav__list a.site-nav__project .nav-label {
  color: var(--gold-2);
}

/* --- 1b. Mobile grimoire sheet: subtitle under each entry --- */
@media (max-width: 1024px) {
  html body .menu-sheet__list a .nav-label {
    display: block;
    line-height: 1.2;
  }

  html body .menu-sheet__list a .nav-sub {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink-muted);
    line-height: 1.25;
    margin-top: 2px;
  }

  html body .menu-sheet__list a:hover .nav-sub,
  html body .menu-sheet__list a:focus-visible .nav-sub,
  html body .menu-sheet__list a:active .nav-sub {
    color: var(--gold-2);
  }

  html body .menu-sheet__list a.menu-sheet__project .nav-label {
    color: var(--gold-2);
  }

  /* Tighten items so the 8-entry menu still fits without scrolling */
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__list { gap: 0.45rem !important; }
  html body .book-toggle:checked ~ .menu-sheet .menu-sheet__list a {
    padding: 0.55rem 1rem !important;
    font-size: 1.15rem !important;
    line-height: 1.2 !important;
  }
}

/* --- 2. Hero: client-facing pitch line + CTA to the project page --- */
.hero__pitch {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 2.4vw, 1.1rem);
  color: var(--ink);
  margin: var(--space-3) auto 0;
  max-width: 34em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.65);
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: var(--space-3);
  padding: 0.6rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--flame-2);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 166, 77, 0.35);
  border-radius: 999px;
  text-decoration: none;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.hero__cta:hover,
.hero__cta:focus-visible {
  color: #fff;
  background: rgba(255, 107, 26, 0.24);
  border-color: var(--flame-2);
  transform: translateY(-2px);
  outline: none;
}

/* --- 3. Footer: email + WhatsApp side by side --- */
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}

.site-footer__links .site-footer__contact {
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: 0.06em;
}


/* =============================================================
   V42: HERO TEXT LEGIBILITY
   Jenny's mobile screenshot 2026-06-04: text hard to read over
   the bright phoenix + window. Localized dark veil behind the
   text block + stronger shadows + soft gold glow on the tagline.
   ============================================================= */

.hero__content::before {
  content: "";
  position: absolute;
  inset: -12% -16%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    rgba(5, 11, 30, 0.62) 0%,
    rgba(5, 11, 30, 0.4) 55%,
    rgba(5, 11, 30, 0) 78%
  );
  pointer-events: none;
}

.hero__eyebrow {
  text-shadow:
    0 1px 3px rgba(5, 11, 30, 0.9),
    0 2px 12px rgba(5, 11, 30, 0.8);
}

.hero__title {
  text-shadow:
    0 2px 6px rgba(5, 11, 30, 0.85),
    0 4px 30px rgba(0, 0, 0, 0.6);
}

.hero__tagline {
  text-shadow:
    0 1px 3px rgba(5, 11, 30, 0.95),
    0 2px 10px rgba(5, 11, 30, 0.85),
    0 0 18px rgba(212, 167, 58, 0.4);
}

.hero__pitch {
  text-shadow:
    0 1px 3px rgba(5, 11, 30, 0.95),
    0 2px 10px rgba(5, 11, 30, 0.85);
}


/* =============================================================
   V43: PROJECT CTA BLOCK
   Reusable "Votre projet, ma realisation" call-to-action shown
   at the bottom of the main section pages + A propos.
   ============================================================= */

.project-cta {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3) var(--space-6);
  text-align: center;
}

.project-cta__text {
  font-family: var(--font-script);
  font-style: italic;
  font-size: clamp(1.15rem, 3vw, 1.5rem);
  color: var(--gold-2);
  margin: 0 0 var(--space-3);
}

.project-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.6rem 1.5rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--flame-2);
  background: rgba(255, 107, 26, 0.08);
  border: 1px solid rgba(255, 166, 77, 0.35);
  border-radius: 999px;
  text-decoration: none;
  transition: color 200ms ease, background 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.project-cta__link:hover,
.project-cta__link:focus-visible {
  color: #fff;
  background: rgba(255, 107, 26, 0.24);
  border-color: var(--flame-2);
  transform: translateY(-2px);
  outline: none;
}


/* =============================================================
   V44: ORIGINES BD GALLERY ALIGNMENT (desktop)
   The 6 planches mix extreme ratios (3108x792 panoramas, a
   1115x1980 portrait, a square...) so the grid rows looked
   jagged. On >= 640px every card gets the same height: the
   planche is letterboxed (object-fit: contain, never cropped)
   in a fixed window and captions align at the bottom.
   Mobile keeps the natural full-width flow.
   ============================================================= */

@media (min-width: 640px) {
  .bd-gallery__item {
    display: flex;
  }

  .bd-gallery__item > .bd-zoom-trigger {
    display: flex;
    width: 100%;
  }

  .bd-gallery__item figure {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .bd-gallery__item img {
    height: 230px;
    object-fit: contain;
    padding: var(--space-2);
    box-sizing: border-box;
  }

  .bd-gallery__item figcaption {
    margin-top: auto;
    padding-top: var(--space-2);
  }
}


/* =============================================================
   V45: HEADER DIRECT CONTACT BUTTONS (WhatsApp + email)
   Filled gold pills with dark icons for maximum legibility,
   especially on mobile (the reported issue). Stays on-brand
   (night + gold + flame). Order in header flex:
   brand | contact | burger (mobile) / nav (desktop).
   ============================================================= */

/* Mobile pushes the brand left via margin-right:auto (set in the mobile block).
   On desktop we rely on justify-content:space-between so the row reads
   brand (left) | nav (centre) | contact (right), all vertically centred. */

.header-contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  order: 2; /* desktop: after the nav; mobile: before the burger */
  margin-left: auto; /* push the contact actions to the far right of the header */
}

/* Burger sits at the far right on mobile (thumb reach) */
.book-trigger { order: 3; }

/* Gold glyph icons by Sheina (transparent PNG/WebP): no pill, just the
   self-contained gold logo, with a soft lift + glow on hover. */
.header-contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  background: none;
  border: 0;
  text-decoration: none;
  line-height: 0;
  transition: transform 200ms ease, filter 200ms ease;
}

.header-contact__icon {
  width: 40px;
  height: 40px;
  display: block;
}

.header-contact__btn:hover,
.header-contact__btn:focus-visible {
  transform: translateY(-2px);
  filter: drop-shadow(0 0 9px rgba(239, 201, 103, 0.75));
  outline: none;
}

/* Labels kept for screen readers only: the gold logos speak for themselves */
.header-contact__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Desktop nav sits between the brand and the contact buttons */
.site-nav { order: 1; }

/* --- Mobile: legibility first --- */
@media (max-width: 1024px) {
  /* Keep the whole header on a single row: brand | contact | burger.
     Without this the burger wrapped to a second line under the brand. */
  .site-header__inner {
    flex-wrap: nowrap;
    gap: 0.5rem;
  }

  .brand { min-width: 0; margin-right: auto; }
  .header-contact { flex: 0 0 auto; gap: 0.5rem; }
  .book-trigger { flex: 0 0 auto; }

  /* Slightly larger gold glyphs on mobile for easy tapping (44px target). */
  .header-contact__btn {
    padding: 4px;
  }

  .header-contact__icon {
    width: 40px;
    height: 40px;
  }
}


/* =============================================================
   V47: HEADER RIGHT CLUSTER VERTICAL ALIGNMENT (mobile)
   The grimoire sat higher than the two contact circles because
   its image was top-anchored in its box with extra padding below
   (leftover from the hidden "Menu" label). Center the book inside
   its stage, zero the trigger padding, and align all three items
   on the same vertical axis. Circles nudged to 46px to better
   match the book's visual scale.
   ============================================================= */

@media (max-width: 1024px) {
  html body .site-header__inner {
    align-items: center !important;
  }

  /* Three right-side controls share one vertical centre */
  html body .header-contact,
  html body .book-trigger {
    align-self: center !important;
  }

  html body .book-trigger {
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Center the book image within its stage (kills the top-anchor gap).
     Keep the ORIGINAL stage 72x48 and img 60px so the MENU overlay,
     positioned in %, stays exactly centered on the cover. */
  html body .book-trigger__stage {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 48px !important;
  }

  html body .book-trigger__img {
    display: block !important;
    width: 60px !important;
    margin: 0 !important;
  }

  /* Seat MENU on the true centre of the book cover (the 3 engraved bars).
     Cover centre measured on the 360x240 art = ~48% x / ~40% y of the stage.
     Text is translate(-50%,-50%) so these are its centre point. */
  html body .book-trigger__menu-text {
    top: 40% !important;
    left: 48% !important;
  }

  /* Gold glyph icons sized to read at the same scale as the grimoire */
  html body .header-contact__icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* =============================================================
   V56: DESKTOP HEADER — single line (PC only).
   brand (left) | nav (centre, compacted) | contact icons (right),
   all on one row, vertically centred. The menu typography + gaps
   are tightened so the 8 entries fit on one line on wide screens.
   On narrower desktops the menu wraps internally as a graceful
   fallback. Mobile is untouched (handled in the max-width blocks).
   ============================================================= */
@media (min-width: 1025px) {
  .site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
  }

  .brand { order: 0; flex: 0 0 auto; }

  /* Nav stays inline between brand and icons, allowed to shrink */
  .site-nav {
    order: 1;
    flex: 0 1 auto;
    min-width: 0;
  }

  .header-contact {
    order: 2;
    margin-left: auto; /* push the icons to the far right of the line */
    align-self: center;
    flex: 0 0 auto;
  }

  /* Compact the menu so logo + menu + icons fit on a single line */
  .site-nav__list {
    justify-content: flex-end;
    gap: 0.25rem 0.65rem;
  }

  .site-nav__list a {
    padding: var(--space-1) 0;
    min-height: 0;
  }

  .site-nav__list .nav-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }

  .site-nav__list .nav-sub {
    font-size: 0.5rem;
    letter-spacing: 0.01em;
  }
}

/* === Category icons: idle float + hover pop (v60) === */
/* Float lives on the .category-card__icon wrapper, hover pop on the inner img,
   so the two transforms never fight. CSS only, honors reduced-motion. */

.category-card__icon {
  display: inline-block;
  animation: iconFloat 5s ease-in-out infinite;
  will-change: transform;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.category-card:nth-child(1) .category-card__icon { animation-delay: 0s; }
.category-card:nth-child(2) .category-card__icon { animation-delay: 0.6s; }
.category-card:nth-child(3) .category-card__icon { animation-delay: 1.2s; }
.category-card:nth-child(4) .category-card__icon { animation-delay: 1.8s; }
.category-card:nth-child(5) .category-card__icon { animation-delay: 2.4s; }

.category-card__icon img {
  transition: transform 260ms ease, filter 260ms ease;
}

.category-card__link:hover .category-card__icon img,
.category-card__link:focus-visible .category-card__icon img {
  transform: scale(1.15) rotate(-4deg);
  filter: drop-shadow(0 0 12px rgba(239, 201, 103, 0.7));
}

/* === Category icon halo (v62) === */
/* Pulsing golden aura behind each icon. The icon establishes its own stacking
   context (z-index:0) so the ::after halo (z-index:-1) sits behind the icon but
   above the card background. CSS only, honors reduced-motion. */

.category-card__icon {
  position: relative;
  z-index: 0;
}

.category-card__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%) scale(0.9);
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(239, 201, 103, 0.5) 0%,
    rgba(212, 167, 58, 0.22) 42%,
    rgba(212, 167, 58, 0) 70%
  );
  animation: haloPulse 3.2s ease-in-out infinite;
}

@keyframes haloPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.18); }
}

.category-card:nth-child(1) .category-card__icon::after { animation-delay: 0s; }
.category-card:nth-child(2) .category-card__icon::after { animation-delay: 0.7s; }
.category-card:nth-child(3) .category-card__icon::after { animation-delay: 1.4s; }
.category-card:nth-child(4) .category-card__icon::after { animation-delay: 2.1s; }
.category-card:nth-child(5) .category-card__icon::after { animation-delay: 2.8s; }