/* ----------------------------------------------------
   Iskandar El-Dick · Es liegt nicht in meiner Hand
   لا حيلة لي
   ---------------------------------------------------- */

:root {
  --c-cream:        #F8F4ED;
  --c-paper:        #FAF7F2;
  --c-ink:          #221E1A;
  --c-ink-2:        #4A4138;
  --c-muted:        #7A6F62;
  --c-line:         #D8CEBE;

  --c-sea-deep:     #0F2A40;
  --c-sea:          #1B3A57;
  --c-sand:         #C9A66B;       /* bright gold, use on DARK bg only */
  --c-eyebrow:      #8B6520;       /* deep gold, WCAG-AA on cream (5.0:1) */
  --c-cedar:        #4A6B3D;
  --c-clay:         #8C5A3B;
  --c-rose:         #B5715F;

  --c-accent:       var(--c-sand);

  --serif-de:       'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --display-de:     'Italiana', 'Cormorant Garamond', Georgia, serif;
  --body-de:        'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --serif-ar:       'Amiri', 'Noto Naskh Arabic', 'Times New Roman', serif;
  --sans-ui:        'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --max:            72rem;
  --gutter:         max(1.25rem, 4vw);
  --rad:            12px;
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
a { color: inherit; }

body {
  font-family: var(--body-de);
  font-weight: 300;
  font-size: clamp(1.08rem, 0.95rem + 0.4vw, 1.22rem);
  line-height: 1.65;
  letter-spacing: .005em;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* skip link */
.skip {
  position: absolute; left: -100vw; top: 0;
  background: var(--c-ink); color: var(--c-cream);
  padding: .5rem 1rem; z-index: 9999;
}
.skip:focus { left: 0; }

/* Mode visibility — see book.html / index.html for class semantics:
   .t-en  → English UI text (always visible in DE & Both, hidden in AR-only)
   .t-de  → German poem content (toggled per mode)
   .t-ar  → Arabic poem/UI content (toggled per mode) */
[data-mode="de"]   .t-ar { display: none !important; }
[data-mode="ar"]   .t-de,
[data-mode="ar"]   .t-en { display: none !important; }
[data-mode="ar"]   .dot-sep { display: none; }
[data-mode="de"]   .dot-sep { display: none; }
[data-mode="both"] .t-de { display: block; }
[data-mode="both"] .t-ar { display: block; }

/* In AR-only mode mirror selected layout containers (not body — that
   triggers Chrome render quirks with isolation+animation+backdrop-filter). */
[data-mode="ar"] .section-h,
[data-mode="ar"] .toc-list,
[data-mode="ar"] .dedication-inner,
[data-mode="ar"] .poem-head,
[data-mode="ar"] .poem-body { direction: rtl; }

/* Arabic typographic baseline — 2.05 line-height for proper Naskh breathing */
.t-ar, [lang="ar"] {
  font-family: var(--serif-ar);
  line-height: 2.05;
  font-weight: 400;
  font-feature-settings: "liga" 1, "calt" 1, "kern" 1;
  word-spacing: .04em;
}

/* ============== LANG NAV ============== */
.lang-nav {
  position: fixed; top: 1.1rem; right: 1.1rem; z-index: 1000;
  display: inline-flex; gap: 0;
  background: rgba(248, 244, 237, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  font-family: var(--sans-ui);
  font-size: .85rem;
}
/* Lang toggle stays on the right in every mode (no flip in RTL) */
.lang-btn {
  padding: .55rem 1rem;
  border-radius: 999px;
  color: var(--c-ink-2);
  letter-spacing: .02em;
  transition: background .25s, color .25s;
}
.lang-btn[data-mode="ar"] { font-family: var(--serif-ar); font-size: 1.05rem; line-height: 1; }
.lang-btn:hover { color: var(--c-ink); }
.lang-btn.is-active {
  background: var(--c-ink);
  color: var(--c-cream);
}
.lang-btn .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-sand); margin-right: .4rem; vertical-align: 2px;
}

/* ============== HERO ============== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  color: var(--c-cream);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: 0;
  background-image: url('assets/el-mina-meer.jpg');
  background-size: cover;
  background-position: center 35%;
  background-attachment: fixed; /* parallax */
  filter: brightness(.55) saturate(1.05);
  z-index: -2;
}
@media (max-width: 900px), (hover: none) {
  .hero-bg { background-attachment: scroll; } /* mobile / iOS fallback */
}
@keyframes heroZoom {
  to { transform: scale(1); }
}
.hero-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 30%, rgba(15, 42, 64, .55) 70%, rgba(0,0,0,.85) 100%),
    linear-gradient(180deg, rgba(15,42,64,.35) 0%, transparent 25%, transparent 75%, rgba(0,0,0,.6) 100%);
  z-index: -1;
}
.hero-inner {
  padding: var(--gutter);
  max-width: 56rem;
  position: relative;
}
.hero-eyebrow {
  font-family: var(--sans-ui);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .82rem;
  color: var(--c-sand);
  margin: 0 0 2.5rem;
  opacity: 0;
  animation: fadeUp 1.2s .3s ease-out forwards;
}
.hero-title {
  margin: 0;
  display: grid;
  gap: .8rem;
  line-height: 1;
}
.hero-title .t-de {
  font-family: var(--serif-de);
  font-weight: 300;
  font-size: clamp(2.6rem, 1.5rem + 5vw, 5.4rem);
  letter-spacing: -.01em;
  opacity: 0;
  animation: fadeUp 1.2s .6s ease-out forwards;
}
.hero-title .t-de em {
  font-style: italic;
  color: var(--c-sand);
  font-weight: 400;
}
.hero-title .t-ar {
  font-size: clamp(2.4rem, 1.5rem + 4.5vw, 4.8rem);
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0;
  animation: fadeUp 1.2s .9s ease-out forwards;
}
.hero-sub {
  margin-top: 2rem;
  font-family: var(--sans-ui);
  font-size: .95rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--c-cream);
  opacity: 0;
  animation: fadeUp 1.2s 1.2s ease-out forwards;
  display: flex; gap: 1rem; justify-content: center; align-items: center;
  flex-wrap: wrap;
}
.hero-sub .t-ar {
  font-family: var(--serif-ar);
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1rem;
}
.hero-sub .dot-sep { color: var(--c-sand); opacity: .8; }
[data-mode="both"] .hero-sub .dot-sep { display: inline; }
.hero-line {
  width: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-sand), transparent);
  margin: 2.2rem auto 1rem;
  opacity: 0;
  animation: fadeUp 1.2s 1.4s ease-out forwards;
}
.hero-meta {
  margin: 0;
  font-family: var(--sans-ui);
  font-size: .82rem;
  letter-spacing: .35em;
  color: rgba(248, 244, 237, .65);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 1.2s 1.6s ease-out forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scroll-cue {
  position: absolute; bottom: 2.4rem; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 60px;
  display: block;
  opacity: 0;
  animation: fadeUp 1.2s 2s ease-out forwards;
}
.scroll-cue-line {
  display: block; width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, var(--c-sand) 50%, transparent);
  animation: scrollDown 2.2s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { transform: translateY(-30%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(60%); opacity: 0; }
}

/* ============== ABOUT ============== */
.about {
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  background: var(--c-paper);
}
.about-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px, 320px) 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 800px) {
  .about-inner { grid-template-columns: 1fr; }
}
.about-portrait {
  position: sticky; top: 5rem;
  margin: 0;
}
.about-portrait img {
  border-radius: 4px;
  filter: sepia(.06) saturate(.95);
  box-shadow:
    0 1px 2px rgba(0,0,0,.05),
    0 20px 50px -15px rgba(0,0,0,.18);
}
.about-portrait-cap {
  margin-top: 1rem;
  font-family: var(--sans-ui);
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
  display: flex; flex-direction: column; gap: .3rem;
}
.about-portrait-cap .t-ar { font-family: var(--serif-ar); text-transform: none; letter-spacing: 0; font-size: 1rem; }

.section-h {
  font-family: var(--serif-de);
  font-weight: 300;
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  letter-spacing: -.01em;
  margin: 0 0 2rem;
  display: flex; gap: 1rem; align-items: baseline;
  flex-wrap: wrap;
}
.section-h .t-ar {
  font-weight: 700;
  font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem);
  color: var(--c-clay);
}
.section-h--inverse { color: var(--c-cream); }
.section-h--inverse .t-ar { color: var(--c-sand); }

.about-text p {
  margin: 0 0 1.1rem;
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--c-ink-2);
}
.about-text p strong { color: var(--c-ink); font-weight: 500; }
.about-text p em { color: var(--c-clay); font-style: italic; }
.about-text .t-ar p { font-size: 1.24rem; line-height: 2.1; letter-spacing: .005em; }

.about-inset {
  margin: 3rem 0 0;
  border-top: 1px solid var(--c-line);
  padding-top: 2rem;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (max-width: 600px) {
  .about-inset { grid-template-columns: 1fr; }
}
.about-inset img {
  border-radius: 3px;
  box-shadow: 0 8px 30px -10px rgba(0,0,0,.2);
}
.about-inset figcaption {
  font-family: var(--sans-ui);
  font-size: .82rem;
  color: var(--c-muted);
  line-height: 1.6;
  display: flex; flex-direction: column; gap: .4rem;
}
.about-inset figcaption .t-ar { font-family: var(--serif-ar); font-size: 1rem; }

/* ============== DEDICATION ============== */
.dedication {
  position: relative;
  padding: clamp(6rem, 12vw, 10rem) var(--gutter);
  color: var(--c-cream);
  isolation: isolate;
  text-align: center;
  overflow: hidden;
}
.dedication-bg {
  position: absolute; inset: 0;
  background-image: url('assets/sepia-portrait.jpg');
  background-size: cover;
  background-position: center 25%;
  filter: brightness(.32) sepia(.5) saturate(1.2);
  z-index: -2;
}
.dedication::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(34,30,26,.85) 0%, rgba(34,30,26,.7) 100%);
  z-index: -1;
}
.dedication-inner {
  max-width: 50rem; margin: 0 auto;
}
.dedication-inner .section-h {
  justify-content: center;
}
.dedication-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 2rem;
}
[data-mode="both"] .dedication-grid {
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  text-align: left;
}
[data-mode="both"] .dedication-grid .t-ar { text-align: right; }
@media (max-width: 700px) {
  [data-mode="both"] .dedication-grid { grid-template-columns: 1fr; }
}
.dedication-block {
  font-family: var(--serif-de);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.15rem, .95rem + .8vw, 1.45rem);
  line-height: 1.65;
  color: rgba(248, 244, 237, .92);
}
.dedication-block.t-ar {
  font-family: var(--serif-ar);
  font-style: normal;
  font-weight: 400;
  line-height: 2.1;
  font-size: clamp(1.28rem, 1.05rem + .85vw, 1.62rem);
  letter-spacing: .005em;
  direction: rtl;
}
.dedication-block .v { display: block; }

/* ============== TOC ============== */
.toc {
  padding: clamp(5rem, 10vw, 8rem) var(--gutter);
  background: var(--c-cream);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}
.toc .section-h {
  max-width: var(--max);
  margin-left: auto; margin-right: auto;
}
.toc-list {
  max-width: var(--max);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  counter-reset: poem;
}
.toc-link {
  display: grid;
  grid-template-columns: 3.2rem 1fr auto 1fr;
  gap: 1.5rem;
  align-items: baseline;
  padding: 1rem .5rem;
  border-bottom: 1px solid rgba(216, 206, 190, .55);
  text-decoration: none;
  color: inherit;
  transition: background .2s, padding .25s;
}
.toc-link:hover {
  background: rgba(201, 166, 107, .08);
  padding-left: 1.2rem;
}
[data-mode="ar"] .toc-link:hover { padding-left: .5rem; padding-right: 1.2rem; }
.toc-num {
  font-family: var(--sans-ui);
  font-size: .82rem;
  letter-spacing: .15em;
  color: var(--c-eyebrow);
  font-weight: 600;
  direction: ltr;
  unicode-bidi: isolate;
}
.toc-meta { direction: ltr; unicode-bidi: isolate; }
.toc-de {
  font-family: var(--serif-de);
  font-weight: 400;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--c-ink);
}
.toc-meta {
  font-family: var(--sans-ui);
  font-size: .78rem;
  color: var(--c-muted);
  letter-spacing: .04em;
  white-space: nowrap;
}
.toc-ar {
  font-family: var(--serif-ar);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--c-clay);
  text-align: right;
  direction: rtl;
}
[data-mode="de"] .toc-link  { grid-template-columns: 3.2rem 1fr auto; }
[data-mode="ar"] .toc-link  { grid-template-columns: 1fr auto 3.2rem; direction: rtl; }
[data-mode="ar"] .toc-link .toc-de { display: none; }
[data-mode="de"] .toc-link .toc-ar { display: none; }
@media (max-width: 700px) {
  .toc-link { grid-template-columns: 2.5rem 1fr; gap: .8rem; }
  .toc-meta, .toc-ar { display: none; }
  [data-mode="ar"] .toc-de { display: none; }
  [data-mode="ar"] .toc-link { grid-template-columns: 1fr 2.5rem; }
  [data-mode="ar"] .toc-link .toc-ar { display: block; }
}

/* ============== POEM PAGES ============== */
.poem {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  isolation: isolate;
  background: var(--c-paper);
  border-bottom: 1px solid rgba(216, 206, 190, .35);
  overflow: hidden;
}
.poem--photo {
  color: var(--c-cream);
}
.poem-bg {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* parallax effect */
}
@media (max-width: 900px), (hover: none) {
  .poem-bg { background-attachment: scroll; }
}
.poem-bg-overlay {
  position: absolute; inset: 0; z-index: -1;
}
.poem--photo .poem-bg-overlay {
  background: linear-gradient(180deg, rgba(15,30,45,.78), rgba(20,18,15,.85));
}
.poem--tinted .poem-bg-overlay {
  background:
    radial-gradient(ellipse at top right, color-mix(in srgb, var(--c-accent, #C9A66B) 8%, transparent), transparent 60%),
    radial-gradient(ellipse at bottom left, color-mix(in srgb, var(--c-accent, #C9A66B) 5%, transparent), transparent 60%);
}

.poem-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.poem-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: 1.8rem;
  border-bottom: 1px solid rgba(122, 111, 98, .22);
}
.poem--photo .poem-head { border-color: rgba(201, 166, 107, .35); }
.poem-num {
  font-family: var(--sans-ui);
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--c-accent);
  font-weight: 500;
  direction: ltr;
  unicode-bidi: isolate;
}
.poem-titles {
  display: flex; gap: 1.5rem;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
}
.poem-title-de {
  font-family: var(--serif-de);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  letter-spacing: -.005em;
}
.poem--photo .poem-title-de { color: var(--c-cream); }
.poem-title-ar {
  font-family: var(--serif-ar);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  color: var(--c-clay);
  direction: rtl;
}
.poem--photo .poem-title-ar { color: var(--c-sand); }
.poem-meta {
  font-family: var(--sans-ui);
  font-size: .75rem;
  letter-spacing: .15em;
  color: var(--c-muted);
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  display: flex; flex-direction: column; gap: .25rem;
  align-items: flex-end;
}
.poem-meta .t-ar {
  font-family: var(--serif-ar);
  font-size: .9rem;
  letter-spacing: 0;
  text-transform: none;
}
.poem--photo .poem-meta { color: rgba(248, 244, 237, .7); }

.poem-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
[data-mode="both"] .poem-body {
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 800px) {
  [data-mode="both"] .poem-body {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  [data-mode="both"] .poem-de { padding-bottom: 2rem; border-bottom: 1px solid rgba(122,111,98,.18); }
}
.poem-de, .poem-ar {
  font-size: clamp(1.05rem, .98rem + .25vw, 1.18rem);
  line-height: 1.8;
}
.poem-de {
  font-family: var(--body-de);
  color: var(--c-ink);
}
.poem--photo .poem-de { color: rgba(248, 244, 237, .92); }
.poem-ar {
  font-family: var(--serif-ar);
  direction: rtl;
  text-align: right;
  font-size: clamp(1.28rem, 1.12rem + .42vw, 1.46rem);
  line-height: 2.15;
  letter-spacing: .005em;
}
.poem--photo .poem-ar { color: rgba(248, 244, 237, .92); }

[data-mode="both"] .poem-de { text-align: left; }
[data-mode="both"] .poem-ar { text-align: right; }
[data-mode="de"]   .poem-de { max-width: 38rem; margin: 0 auto; }
[data-mode="ar"]   .poem-ar { max-width: 38rem; margin: 0 auto; }

/* Stanza & verses */
.stanza {
  margin: 0 0 1.6rem;
}
.stanza:last-child { margin-bottom: 0; }
.v {
  display: block;
  margin: 0;
}
/* Drop cap on first stanza first verse (German only, opt-in) */
.poem-de .stanza:first-child .v:first-child::first-letter {
  font-family: var(--serif-de);
  font-weight: 300;
  font-size: 3.2em;
  float: left;
  line-height: .85;
  margin: .12em .12em 0 0;
  color: var(--c-accent);
}
[data-mode="both"] .poem-de .stanza:first-child .v:first-child::first-letter,
.poem--photo .poem-de .stanza:first-child .v:first-child::first-letter {
  /* keep cap subtle in dual + photo modes */
  font-size: 2.6em;
  color: var(--c-sand);
}

/* ============================================================
   ARABIC ORNAMENT — SVG 8-pointed star divider
   Inspired by the wooden mosaic blocks on the cover of "Qisas
   min al-Hayaa". Used as poem-end ornament and section divider.
   ============================================================ */
.ornament {
  display: block;
  width: 100%;
  max-width: 280px;
  height: 32px;
  margin: 0 auto;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 32'><g fill='none' stroke='%238B6520' stroke-width='1' stroke-linecap='round'><line x1='10' y1='16' x2='100' y2='16'/><line x1='180' y1='16' x2='270' y2='16'/><circle cx='110' cy='16' r='1.6' fill='%238B6520' stroke='none'/><circle cx='170' cy='16' r='1.6' fill='%238B6520' stroke='none'/><g transform='translate(140 16)'><rect x='-10' y='-10' width='20' height='20'/><rect x='-10' y='-10' width='20' height='20' transform='rotate(45)'/><circle r='3' fill='%238B6520' fill-opacity='.4' stroke='none'/></g></g></svg>") center/contain no-repeat;
  opacity: .85;
}
.ornament--inverse,
.poem--photo .ornament {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 32'><g fill='none' stroke='%23C9A66B' stroke-width='1' stroke-linecap='round'><line x1='10' y1='16' x2='100' y2='16'/><line x1='180' y1='16' x2='270' y2='16'/><circle cx='110' cy='16' r='1.6' fill='%23C9A66B' stroke='none'/><circle cx='170' cy='16' r='1.6' fill='%23C9A66B' stroke='none'/><g transform='translate(140 16)'><rect x='-10' y='-10' width='20' height='20'/><rect x='-10' y='-10' width='20' height='20' transform='rotate(45)'/><circle r='3' fill='%23C9A66B' fill-opacity='.5' stroke='none'/></g></g></svg>");
  opacity: .9;
}

/* Poem ornament now uses the SVG divider */
.poem-ornament {
  margin: 3rem auto 0;
  width: 100%;
  max-width: 280px;
  height: 32px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 32'><g fill='none' stroke='%238B6520' stroke-width='1' stroke-linecap='round'><line x1='10' y1='16' x2='100' y2='16'/><line x1='180' y1='16' x2='270' y2='16'/><circle cx='110' cy='16' r='1.6' fill='%238B6520' stroke='none'/><circle cx='170' cy='16' r='1.6' fill='%238B6520' stroke='none'/><g transform='translate(140 16)'><rect x='-10' y='-10' width='20' height='20'/><rect x='-10' y='-10' width='20' height='20' transform='rotate(45)'/><circle r='3' fill='%238B6520' fill-opacity='.4' stroke='none'/></g></g></svg>") center/contain no-repeat;
  opacity: .85;
}
.poem--photo .poem-ornament {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 32'><g fill='none' stroke='%23C9A66B' stroke-width='1' stroke-linecap='round'><line x1='10' y1='16' x2='100' y2='16'/><line x1='180' y1='16' x2='270' y2='16'/><circle cx='110' cy='16' r='1.6' fill='%23C9A66B' stroke='none'/><circle cx='170' cy='16' r='1.6' fill='%23C9A66B' stroke='none'/><g transform='translate(140 16)'><rect x='-10' y='-10' width='20' height='20'/><rect x='-10' y='-10' width='20' height='20' transform='rotate(45)'/><circle r='3' fill='%23C9A66B' fill-opacity='.5' stroke='none'/></g></g></svg>");
  opacity: .9;
}

/* Subtle 8-star pattern as repeating background — used on the dedication section
   to give it a textured, mosaic-like feel without being distracting. */
.dedication::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'><g fill='none' stroke='%23C9A66B' stroke-width='.6' stroke-opacity='.18'><g transform='translate(40 40)'><rect x='-14' y='-14' width='28' height='28'/><rect x='-14' y='-14' width='28' height='28' transform='rotate(45)'/></g></g></svg>") center/80px 80px repeat;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .5;
}

/* Next-poem link */
.poem-next {
  display: inline-flex;
  margin-top: 3rem;
  padding: .65rem 1.4rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--sans-ui);
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--c-ink-2);
  transition: background .2s, color .2s;
}
.poem--photo .poem-next { color: var(--c-cream); border-color: rgba(248,244,237,.4); }
.poem-next:hover {
  background: var(--c-ink);
  color: var(--c-cream);
  border-color: var(--c-ink);
}
.poem--photo .poem-next:hover {
  background: var(--c-cream); color: var(--c-ink); border-color: var(--c-cream);
}
.poem-foot {
  margin-top: 3rem;
  text-align: center;
}

/* ============== FOOTER ============== */
.site-foot {
  background: var(--c-ink);
  color: var(--c-cream);
  padding: 4rem var(--gutter);
  text-align: center;
}
.foot-inner { max-width: 40rem; margin: 0 auto; }
.foot-mark {
  font-size: 2rem; color: var(--c-sand); opacity: .8;
  margin-bottom: 1.2rem;
}
.foot-line {
  font-family: var(--serif-de);
  font-weight: 400;
  font-size: 1.1rem;
  margin: 0 0 .4rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.foot-line .t-ar { font-family: var(--serif-ar); }
.foot-sub {
  font-family: var(--sans-ui);
  font-size: .85rem;
  letter-spacing: .03em;
  color: rgba(248,244,237,.6);
  margin: 0;
  display: flex; flex-direction: column; gap: .3rem;
}
.foot-sub .t-ar { font-family: var(--serif-ar); }

/* ============== SCROLL FADE-IN ============== */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* selection */
::selection { background: var(--c-sand); color: var(--c-ink); }

/* reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   English UI text helpers
   ============================================================ */
.t-en { /* visible in both & de, hidden in ar — same rules as t-de */ }

/* Eyebrow: small uppercase English UI label that sits above bilingual headings */
.section-eyebrow {
  font-family: var(--sans-ui);
  font-size: .76rem;
  letter-spacing: .3em;
  color: var(--c-eyebrow);
  text-transform: uppercase;
  margin: 0 0 .9rem;
  font-weight: 600;
}
.section-eyebrow.centered { text-align: center; }
.section-eyebrow--inverse { color: var(--c-sand); }
[data-mode="ar"] .section-eyebrow { display: none; }
.section-h--center { justify-content: center; }

/* ============================================================
   Reading progress bar (book page only)
   ============================================================ */
.read-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 1100;
  background: transparent;
  pointer-events: none;
}
.read-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--c-sand), var(--c-clay));
  transition: width .12s linear;
  box-shadow: 0 0 14px rgba(201, 166, 107, .55);
}

/* ============================================================
   Back-to-library link (book page only, top-left corner)
   ============================================================ */
.back-to-library {
  position: fixed;
  top: 1.1rem; left: 1.1rem;
  z-index: 1000;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem 1rem;
  background: rgba(248, 244, 237, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--c-ink-2);
  font-family: var(--sans-ui);
  font-size: .82rem;
  letter-spacing: .12em;
  transition: background .2s, color .2s;
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.back-to-library:hover { background: var(--c-ink); color: var(--c-cream); border-color: var(--c-ink); }
.back-arrow { transition: transform .2s; display: inline-block; }
.back-to-library:hover .back-arrow { transform: translateX(-3px); }
[data-mode="ar"] .back-to-library { left: auto; right: 1.1rem; }
[data-mode="ar"] .back-to-library .back-arrow { transform: scaleX(-1); }
[data-mode="ar"] .back-to-library:hover .back-arrow { transform: scaleX(-1) translateX(-3px); }

/* ============================================================
   Floating Quick-Nav trigger — book page only
   Opens an overlay with Contents + Search.
   ============================================================ */
.qn-trigger {
  position: fixed;
  bottom: 1.4rem; right: 1.4rem;
  z-index: 999;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.2rem;
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: 999px;
  font-family: var(--sans-ui);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 14px 36px -12px rgba(0,0,0,.4);
  transform: translateY(140%);
  opacity: 0;
  transition: transform .4s var(--ease-premium, ease), opacity .4s var(--ease-premium, ease), background .25s, box-shadow .35s;
  pointer-events: none;
  font-weight: 500;
}
.qn-trigger.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.qn-trigger:hover {
  background: var(--c-clay);
  box-shadow: 0 22px 50px -12px rgba(0,0,0,.5);
  transform: translateY(-2px);
}
.qn-trigger-icon { display: inline-flex; }
[data-mode="ar"] .qn-trigger { right: auto; left: 1.4rem; }

/* Quick-Nav overlay panel */
.qn-overlay {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4rem 1rem 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.qn-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.qn-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 30, 40, .6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.qn-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 85vh;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 40px 80px -20px rgba(0,0,0,.45),
    0 0 0 1px rgba(201, 166, 107, .15);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(-12px) scale(.97);
  transition: transform .4s var(--ease-premium, ease);
}
.qn-overlay[aria-hidden="false"] .qn-panel {
  transform: translateY(0) scale(1);
}
.qn-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem .8rem;
  border-bottom: 1px solid var(--c-line);
}
.qn-eyebrow {
  font-family: var(--sans-ui);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--c-eyebrow);
  text-transform: uppercase;
  margin: 0;
  font-weight: 600;
}
.qn-close {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--c-muted);
  transition: background .2s, color .2s;
}
.qn-close:hover { background: var(--c-line); color: var(--c-ink); }
.qn-search {
  position: relative;
  padding: .25rem 1.25rem;
  display: flex; align-items: center;
  gap: .8rem;
  border-bottom: 1px solid var(--c-line);
}
.qn-search-icon { color: var(--c-muted); flex-shrink: 0; }
.qn-input {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--body-de);
  font-size: 1.05rem;
  padding: 1rem 0;
  color: var(--c-ink);
  outline: none;
  width: 100%;
}
.qn-input::placeholder { color: var(--c-muted); }
.qn-results {
  list-style: none;
  padding: .5rem 0;
  margin: 0;
  overflow-y: auto;
  flex: 1;
}
.qn-result {
  display: block;
  padding: .85rem 1.25rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s;
}
[data-mode="ar"] .qn-result { border-left: 0; border-right: 3px solid transparent; }
.qn-result:hover, .qn-result.is-active {
  background: color-mix(in srgb, var(--c-sand) 8%, transparent);
  border-left-color: var(--c-eyebrow);
}
[data-mode="ar"] .qn-result:hover, [data-mode="ar"] .qn-result.is-active {
  border-right-color: var(--c-eyebrow);
}
.qn-result-title {
  display: flex; gap: .8rem; align-items: baseline;
  margin-bottom: .15rem;
}
.qn-result-num {
  font-family: var(--sans-ui);
  font-size: .72rem;
  letter-spacing: .15em;
  color: var(--c-eyebrow);
  font-weight: 600;
  direction: ltr; unicode-bidi: isolate;
  min-width: 1.8rem;
}
.qn-result-de {
  font-family: var(--serif-de);
  font-style: italic;
  font-size: 1.08rem;
  flex: 1;
  color: var(--c-ink);
}
.qn-result-ar {
  font-family: var(--serif-ar);
  font-weight: 700;
  color: var(--c-clay);
  font-size: 1.18rem;
}
.qn-result-snippet {
  font-size: .85rem;
  color: var(--c-muted);
  line-height: 1.5;
  padding-left: 2.6rem;
  margin: 0;
}
[data-mode="ar"] .qn-result-snippet { padding-left: 0; padding-right: 2.6rem; }
.qn-result-snippet[lang="ar"] {
  font-family: var(--serif-ar);
  font-size: 1rem;
  line-height: 1.7;
}
.qn-result-snippet mark {
  background: color-mix(in srgb, var(--c-sand) 35%, transparent);
  color: var(--c-ink);
  padding: 0 3px;
  border-radius: 2px;
  font-weight: 500;
}
.qn-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  color: var(--c-muted);
  font-style: italic;
}
.qn-hint {
  padding: .65rem 1.25rem;
  font-family: var(--sans-ui);
  font-size: .72rem;
  color: var(--c-muted);
  margin: 0;
  border-top: 1px solid var(--c-line);
  text-align: center;
}
.qn-hint kbd {
  display: inline-block;
  background: var(--c-cream);
  border: 1px solid var(--c-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--sans-ui);
  font-size: .68rem;
  color: var(--c-ink-2);
  margin: 0 .15em;
}

@media (max-width: 700px) {
  .qn-overlay { padding: 1rem .6rem .6rem; }
  .qn-panel { max-height: 94vh; border-radius: 10px; }
  .qn-trigger { bottom: .9rem; right: .9rem; padding: .75rem 1rem; font-size: .72rem; }
  [data-mode="ar"] .qn-trigger { left: .9rem; right: auto; }
  .qn-trigger-label { display: none; }
  .qn-search { padding: .25rem .85rem; }
  .qn-result { padding: .75rem .85rem; }
  .qn-result-snippet { padding-left: 0; }
  [data-mode="ar"] .qn-result-snippet { padding-right: 0; }
  .qn-hint { display: none; } /* hotkeys n/a on mobile */
}

/* ============================================================
   MOBILE PASS — refinements for ≤500 px (and ≤700 px)
   ============================================================ */
@media (max-width: 700px) {
  /* Compact lang nav */
  .lang-nav {
    top: .7rem; right: .7rem;
    font-size: .75rem;
    padding: 3px;
  }
  .lang-btn { padding: .45rem .7rem; }
  .lang-btn[data-mode="ar"] { font-size: .95rem; padding: .45rem .55rem; }
  /* Mobile: toggle stays right in every mode too */

  /* Mobile hero: full screen on landscape but a leaner 65vh
     on portrait so the library is one swipe away. */
  .hero { min-height: 65svh; min-height: 65vh; }

  /* Library hero compact */
  .lib-hero { padding-top: 6.5rem; padding-bottom: 4rem; min-height: 65vh; min-height: 65svh; }

  /* Disable background-attachment fixed on mobile (jank on iOS Safari) */
  .hero-bg { background-attachment: scroll !important; }

  /* Back to library button compact on mobile (icon only) */
  .back-to-library {
    top: .7rem; left: .7rem;
    padding: .55rem .8rem;
    font-size: .78rem;
  }
  .back-label { display: none; }
  [data-mode="ar"] .back-to-library { right: .7rem; left: auto; }

  /* Mini nav compact */
  .mini-nav {
    bottom: .9rem; right: .9rem;
    padding: .75rem 1.05rem;
    font-size: .72rem;
  }
  .mini-nav-label { display: none; }
  .mini-nav-icon { font-size: 1.2rem; }
  [data-mode="ar"] .mini-nav { left: .9rem; right: auto; }

  /* Hero title — slightly tighter on mobile */
  .hero-title .t-de { font-size: clamp(2rem, 1.2rem + 6vw, 3.4rem); line-height: 1.05; }
  .hero-title .t-ar { font-size: clamp(2rem, 1.3rem + 5.5vw, 3.2rem); }

  /* Subtle reduction of hero meta on mobile */
  .hero-meta, .lib-hero-meta { font-size: .72rem; letter-spacing: .25em; }
  .hero-eyebrow, .lib-hero-eyebrow { letter-spacing: .25em; font-size: .7rem; margin-bottom: 1.5rem; }

  /* About section: portrait above text, less sticky */
  .about-portrait { position: static; max-width: 220px; margin: 0 auto 1rem; }
  .about-portrait-cap { margin-bottom: 1.5rem; }

  /* Reduce drop cap on small screens (looks ungainly otherwise) */
  .poem-de .stanza:first-child .v:first-child::first-letter {
    font-size: 2.6em;
    margin: .15em .12em 0 0;
  }
  [data-mode="both"] .poem-de .stanza:first-child .v:first-child::first-letter {
    font-size: 2.2em;
  }

  /* Poem head: stack number/title/meta on mobile */
  .poem-head {
    grid-template-columns: 1fr;
    gap: .6rem;
    text-align: center;
  }
  .poem-titles { justify-content: center; }
  .poem-meta { align-items: center; text-align: center; }
  .poem-num { text-align: center; }

  /* Tighter foot share */
  .foot-share-btn { padding: .55rem 1.1rem; font-size: .72rem; }

  /* Section header center on mobile so eyebrow + bilingual heading look clean */
  .section-h { justify-content: flex-start; flex-direction: column; gap: .3rem; align-items: flex-start; }
  .toc .section-h, .dedication-inner .section-h { align-items: center; }
  [data-mode="ar"] .section-h { align-items: flex-end; }

  /* Toc cleaner on mobile */
  .toc-list { padding: 0 .25rem; }
  .toc-link { padding: .85rem .25rem; }

  /* About inset stacks on small screens */
  .about-inset { padding-top: 1.5rem; }
}

@media (max-width: 420px) {
  /* On the smallest phones, hide one button label to keep nav tight */
  .lang-btn[data-mode="both"] .dot { display: none; }
  .lang-btn { padding: .42rem .55rem; }
  .hero-line { width: 56px; }
}

/* ============================================================
   AMBIENT MUSIC TOGGLE (bottom-left, subtle)
   ============================================================ */
.audio-toggle {
  position: fixed;
  bottom: 1.4rem; left: 1.4rem;
  z-index: 998;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .65rem 1rem;
  background: rgba(248, 244, 237, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--sans-ui);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  cursor: pointer;
  transition:
    background .35s var(--ease-premium, ease),
    color .35s var(--ease-premium, ease),
    border-color .35s var(--ease-premium, ease),
    transform .25s var(--ease-premium, ease),
    box-shadow .35s var(--ease-premium, ease);
  box-shadow: 0 6px 22px -10px rgba(0,0,0,.18);
}
.audio-toggle:hover {
  color: var(--c-ink);
  border-color: var(--c-eyebrow);
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.22);
}
.audio-icon { display: inline-flex; }
.audio-icon--on { display: none; }
.audio-toggle.is-playing .audio-icon--off { display: none; }
.audio-toggle.is-playing .audio-icon--on { display: inline-flex; }
.audio-toggle.is-playing {
  color: var(--c-clay);
  border-color: var(--c-eyebrow);
  background: color-mix(in srgb, var(--c-sand) 12%, var(--c-paper));
}
.audio-toggle.is-playing::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-sand) 50%, transparent);
  animation: audioPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes audioPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
[data-mode="ar"] .audio-toggle { left: auto; right: 1.4rem; }
@media (max-width: 700px) {
  .audio-toggle { bottom: .9rem; left: .9rem; padding: .55rem .8rem; }
  .audio-toggle-label { display: none; }
  [data-mode="ar"] .audio-toggle { left: auto; right: .9rem; }
}

/* ============================================================
   POEM "LISTEN" BUTTON (Web Speech API, free TTS)
   ============================================================ */
.poem-listen {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1rem;
  padding: .55rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans-ui);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-muted);
  cursor: pointer;
  transition:
    background .3s var(--ease-premium, ease),
    color .3s var(--ease-premium, ease),
    border-color .3s var(--ease-premium, ease),
    transform .2s var(--ease-premium, ease);
}
.poem--photo .poem-listen { color: rgba(248, 244, 237, .7); }
.poem-listen:hover {
  color: var(--c-clay);
  border-color: var(--c-eyebrow);
  transform: translateY(-1px);
}
.poem--photo .poem-listen:hover { color: var(--c-cream); border-color: var(--c-sand); }
.poem-listen.is-speaking {
  color: var(--c-clay);
  border-color: var(--c-clay);
  background: color-mix(in srgb, var(--c-sand) 10%, transparent);
}
.poem--photo .poem-listen.is-speaking { color: var(--c-sand); border-color: var(--c-sand); }
.poem-listen-icon { display: inline-flex; }
.poem-listen-row {
  display: flex; gap: .8rem; flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.5rem;
}

/* ============================================================
   PREMIUM POLISH — refined hover, focus, transitions
   ============================================================ */
:root {
  --ease-premium: cubic-bezier(.2, .7, .3, 1);
}

/* Sticky-nav offset for anchor jumps */
section[id], header[id] {
  scroll-margin-top: 5.5rem;
}

/* Lang nav: smoother active-state transitions */
.lang-btn {
  transition:
    background .35s var(--ease-premium),
    color .35s var(--ease-premium),
    transform .25s var(--ease-premium);
}
.lang-btn:not(.is-active):hover { transform: translateY(-1px); }
.lang-btn:focus-visible {
  outline: 2px solid var(--c-eyebrow);
  outline-offset: 3px;
}

/* Back-to-library: arrow slide + ink fill on hover */
.back-to-library {
  overflow: hidden;
  transition:
    background .4s var(--ease-premium),
    color .4s var(--ease-premium),
    border-color .4s var(--ease-premium),
    transform .25s var(--ease-premium);
}
.back-to-library:hover { transform: translateY(-1px); }

/* TOC: animated gold underline + glowing number on hover */
.toc-link {
  position: relative;
  transition:
    padding .45s var(--ease-premium),
    background .3s ease;
}
.toc-de, .toc-ar {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0% calc(100% - 2px);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .55s var(--ease-premium);
  padding-bottom: 4px;
}
[data-mode="ar"] .toc-de, [data-mode="ar"] .toc-ar { background-position: 100% calc(100% - 2px); }
.toc-link:hover .toc-de,
.toc-link:hover .toc-ar { background-size: 100% 1px; }
.toc-num {
  transition: color .3s, transform .4s var(--ease-premium);
}
.toc-link:hover .toc-num {
  color: var(--c-clay);
  transform: scale(1.1);
}
.toc-link:focus-visible {
  outline: 2px solid var(--c-eyebrow);
  outline-offset: -2px;
  border-radius: 4px;
}

/* Book cards (library): refined lift + gold-glow + ken-burns */
.book-card:not(.book-card--soon) {
  transition:
    transform .55s var(--ease-premium),
    box-shadow .55s var(--ease-premium),
    border-color .4s var(--ease-premium);
}
.book-card:not(.book-card--soon):hover,
.book-card:not(.book-card--soon):focus-within {
  transform: translateY(-8px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c-accent) 40%, transparent),
    0 36px 80px -22px color-mix(in srgb, var(--c-accent) 30%, rgba(0,0,0,.18));
  border-color: color-mix(in srgb, var(--c-accent) 60%, var(--c-line));
}
.book-card .book-cover img {
  transition: transform 1s var(--ease-premium);
}
.book-card:hover .book-cover img,
.book-card:focus-within .book-cover img { transform: scale(1.07); }
.book-card-link:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: -3px;
  border-radius: 8px;
}

/* CTA buttons: smooth fill + lift + gold-glow */
.book-cta, .poem-next, .foot-share-btn, .search-trigger, .qn-trigger {
  transition:
    background .4s var(--ease-premium),
    color .4s var(--ease-premium),
    border-color .4s var(--ease-premium),
    transform .25s var(--ease-premium),
    box-shadow .4s var(--ease-premium),
    gap .25s;
}
.book-cta:hover, .poem-next:hover, .foot-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -12px color-mix(in srgb, var(--c-accent) 50%, transparent);
}
.book-cta:focus-visible, .poem-next:focus-visible, .foot-share-btn:focus-visible {
  outline: 2px solid var(--c-eyebrow);
  outline-offset: 3px;
}

/* Hero title: italic accent gets a subtle hover glow on desktop */
@media (hover: hover) {
  .hero-title .t-de em {
    transition: text-shadow .9s var(--ease-premium), color .4s ease;
  }
  .hero:hover .hero-title .t-de em {
    text-shadow: 0 0 40px color-mix(in srgb, var(--c-sand) 50%, transparent);
  }
}

/* Drop-cap: gentle pulse glow when its poem-section is hovered */
@media (hover: hover) {
  .poem .stanza:first-child .v:first-child::first-letter {
    transition: text-shadow .8s var(--ease-premium);
  }
  .poem:hover .poem-de .stanza:first-child .v:first-child::first-letter {
    text-shadow: 0 0 28px color-mix(in srgb, var(--c-accent) 45%, transparent);
  }
}

/* Author portrait: subtle saturate-up + lift on hover */
.about-portrait img, .lib-author-portrait img {
  transition: filter .5s var(--ease-premium), transform .6s var(--ease-premium);
}
@media (hover: hover) {
  .about-portrait:hover img, .lib-author-portrait:hover img {
    filter: sepia(0) saturate(1) brightness(1.02);
    transform: scale(1.015);
  }
}

/* About-inset image: same Ken-Burns gentle */
.about-inset img {
  transition: transform .8s var(--ease-premium);
}
.about-inset:hover img { transform: scale(1.03); }

/* Mini-nav button: subtle scale on hover */
.mini-nav {
  transition:
    transform .35s var(--ease-premium),
    opacity .35s var(--ease-premium),
    background .25s ease,
    box-shadow .35s var(--ease-premium);
}
.mini-nav.is-visible:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 48px -12px rgba(0,0,0,.5);
}

/* Section-eyebrow: tiny gold dot accent */
.section-eyebrow::before, .lib-section-eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--c-eyebrow);
  border-radius: 50%;
  margin-right: .8em;
  vertical-align: middle;
  transform: translateY(-1px);
}
.section-eyebrow.centered::before, .lib-section-eyebrow.centered::before {
  margin-right: .6em;
}

/* Selection in poem body: gold-on-cream highlight */
.poem-de ::selection, .poem-ar ::selection,
.dedication-block ::selection {
  background: color-mix(in srgb, var(--c-sand) 35%, transparent);
  color: inherit;
}

/* ============================================================
   PRINT — clean reading copy without nav, backgrounds or animations
   ============================================================ */
@media print {
  :root { --c-paper: #fff; --c-cream: #fff; }
  body { background: #fff !important; color: #000 !important; }
  /* Hide all interactive chrome */
  .lang-nav, .scroll-cue, .back-to-library, .mini-nav, .read-progress,
  .poem-next, .poem-foot, .foot-share, .scroll-cue-line,
  .reading-progress, .lesen-nav, .qn-trigger, .qn-overlay, .lesen-tools,
  .lesen-copy, .gb-form, .lib-author-cta-row, .lib-banner, .gb-banner,
  .site-foot, .qisas-ornament-band, .ch-ornament,
  .lesen-photo, .ch-photo,
  .scroll-cue, [aria-hidden="true"]:not(.qisas-cover-img) { display: none !important; }
  /* Heroes */
  .hero, .dedication, .poem--photo, .poem--tinted, .qisas-hero, .lib-hero {
    color: #000 !important;
    background: #fff !important;
    page-break-after: avoid;
  }
  .hero-bg, .hero-vignette, .dedication-bg, .poem-bg, .poem-bg-overlay,
  .lib-hero-bg, .lib-hero-vignette { display: none !important; }
  .hero, .dedication, .qisas-hero, .lib-hero {
    padding: 1.5rem 1rem !important;
    min-height: auto !important;
  }
  .hero-title, .poem-title-de, .poem-title-ar,
  .section-h, .lib-hero-title, .qisas-hero-title,
  .lesen-title-ar, .lesen-title-de, .lesen-title-en {
    color: #000 !important;
  }
  /* Body text */
  .poem, .poem-card, .ch-body, .lesen-body, .lesen-article {
    page-break-inside: avoid;
    padding: 1rem 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }
  .poem-de, .poem-ar, .dedication-block, .ch-body, .lesen-body,
  .gb-entry-text, .sabaqna-dedication, .sabaqna-preface { color: #000 !important; }
  .poem-de .stanza:first-child .v:first-child::first-letter { color: #444; }
  .toc-link:hover { background: transparent; padding-left: .5rem; }
  a { color: #000 !important; text-decoration: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #666; }
  /* Disable all animations and entrance effects */
  .fade-in { opacity: 1 !important; transform: none !important; }
  *, *::before, *::after {
    animation-duration: 0s !important;
    transition: none !important;
  }
  /* Page setup */
  @page {
    margin: 1.8cm 1.5cm;
    size: A4;
  }
  /* Show URL footer on each printed page */
  body::after {
    content: "iskandar-el-dick.de — gedruckt am " attr(data-print-date);
    display: block;
    margin-top: 2rem;
    font-size: .7rem;
    color: #888;
    text-align: center;
    letter-spacing: .1em;
  }
}

/* ============================================================
   AI-TRANSLATION NOTICE
   ------------------------------------------------------------
   Discreet, italic note placed above any block whose German or
   English text was produced with AI assistance.  Styled to blend
   into the literary palette but remain clearly visible to honest
   readers.
   ============================================================ */
.ai-notice {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  margin: 1.4rem auto 1.6rem;
  max-width: 36rem;
  padding: .7rem 1rem;
  background: rgba(201, 166, 107, .08);
  border-left: 3px solid rgba(139, 90, 43, .45);
  border-radius: 0 4px 4px 0;
  font-family: var(--sans-ui);
  font-size: .78rem;
  line-height: 1.5;
  color: var(--c-muted);
  letter-spacing: .01em;
}
[dir="rtl"] .ai-notice,
.ai-notice[lang="ar"] {
  border-left: none;
  border-right: 3px solid rgba(139, 90, 43, .45);
  border-radius: 4px 0 0 4px;
  font-family: var(--serif-ar);
  font-size: .9rem;
  text-align: right;
}
.ai-notice-icon {
  flex: none;
  margin-top: .15rem;
  color: #8B5A2B;
  opacity: .8;
}
.ai-notice strong {
  color: var(--c-clay);
  font-weight: 600;
}
/* Variant for human-translated content (Papa selbst) — same shape, different tint */
.ai-notice.is-human {
  background: rgba(76, 138, 76, .07);
  border-color: rgba(76, 138, 76, .45);
}
.ai-notice.is-human .ai-notice-icon { color: #2e6b3f; }
.ai-notice.is-human strong { color: #2e6b3f; }

@media print {
  .ai-notice { background: transparent; border-left-color: #999; color: #555; }
}
.gsearch-overlay {
  position: fixed; inset: 0;
  z-index: 9000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(4rem, 12vh, 8rem);
}
.gsearch-overlay[aria-hidden="false"] { display: flex; }
body.gsearch-open { overflow: hidden; }
.gsearch-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 28, 44, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.gsearch-panel {
  position: relative;
  width: min(720px, 92vw);
  max-height: calc(100vh - 8rem);
  background: var(--c-cream);
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(122, 111, 98, .2);
}
.gsearch-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(122, 111, 98, .2);
}
.gsearch-icon { color: var(--c-muted); flex: none; }
.gsearch-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--serif-de);
  font-size: 1.1rem;
  color: var(--c-ink);
}
.gsearch-input::placeholder { color: var(--c-muted); font-style: italic; }
.gsearch-kbd, .gsearch-foot kbd {
  font-family: var(--sans-ui);
  font-size: .68rem;
  letter-spacing: .12em;
  padding: .15rem .42rem;
  background: rgba(122, 111, 98, .12);
  border-radius: 4px;
  color: var(--c-muted);
  border: 1px solid rgba(122, 111, 98, .2);
}
.gsearch-results {
  overflow-y: auto;
  max-height: calc(100vh - 16rem);
  padding: .4rem 0;
}
.gsearch-hint {
  padding: 1.6rem 1.2rem;
  font-family: var(--serif-de);
  color: var(--c-muted);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0;
}
.gsearch-quicklinks {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 0 1.2rem 1.2rem;
}
.gsearch-quicklinks a {
  font-family: var(--sans-ui);
  font-size: .8rem;
  font-weight: 500;
  color: var(--c-ink);
  background: rgba(139, 90, 43, .08);
  border: 1px solid rgba(139, 90, 43, .2);
  border-radius: 999px;
  padding: .42rem .9rem;
  text-decoration: none;
  transition: background .18s;
}
.gsearch-quicklinks a:hover { background: rgba(139, 90, 43, .18); }
.gsearch-result {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  padding: .9rem 1.2rem;
  border-bottom: 1px solid rgba(122, 111, 98, .1);
  text-decoration: none;
  color: var(--c-ink);
  transition: background .12s;
}
.gsearch-result.is-active,
.gsearch-result:hover {
  background: rgba(139, 90, 43, .07);
}
.gsearch-r-tag {
  font-family: var(--sans-ui);
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B5A2B;
  font-weight: 600;
}
.gsearch-r-title {
  font-family: var(--serif-de);
  font-size: 1rem;
  color: var(--c-ink);
  font-weight: 500;
}
.gsearch-r-snippet {
  font-family: var(--serif-de);
  font-size: .85rem;
  color: var(--c-muted);
  line-height: 1.5;
}
.gsearch-result mark {
  background: rgba(201, 166, 107, .35);
  color: inherit;
  border-radius: 2px;
  padding: 0 .12em;
}
.gsearch-foot {
  display: flex;
  gap: 1.4rem;
  padding: .7rem 1.2rem;
  font-family: var(--sans-ui);
  font-size: .72rem;
  color: var(--c-muted);
  border-top: 1px solid rgba(122, 111, 98, .15);
  background: rgba(122, 111, 98, .04);
}
@media (max-width: 600px) {
  .gsearch-overlay { padding-top: 2rem; }
  .gsearch-panel { width: 96vw; max-height: calc(100vh - 4rem); }
  .gsearch-foot { font-size: .66rem; gap: .8rem; flex-wrap: wrap; }
  .gsearch-input { font-size: 1rem; }
}