/* A. R. Raazol – author site
   Layout concept: a dark room lit by one skylight. The light follows the reader;
   everything else stays quiet so the words carry the page.
   Palette from the Echoes of Hope cover: the black room, the cold skylight,
   the bronze lettering, the copper-and-sand back cover. */

@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("../fonts/bodoni-moda-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/ebgaramond-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #000000;      /* the room */
  --skylight: #eef1f2;   /* the light from above */
  --bronze: #b39377;     /* ECHOES lettering */
  --copper: #5b4038;     /* back cover, dark edge */
  --sand: #d2b49a;       /* back cover, light band */
  --ash: #a3a8aa;        /* concrete walls, secondary text */
  --paper: #f1ece2;      /* the book's pages */
  --ink: #1f1915;        /* text on paper and sand */
  --line: rgba(163, 168, 170, 0.22);

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "EB Garamond", Garamond, "Times New Roman", serif;

  --measure: 34rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --step--1: 0.95rem;
  --step-0: 1.1875rem;
  --step-1: 1.5rem;
  --step-2: clamp(1.7rem, 2.6vw, 2.1rem);
  --step-3: clamp(2.3rem, 4.6vw, 3.5rem);
  --step-4: clamp(2.5rem, 5.6vw, 4.6rem);

  --lx: 72%;             /* light position, moved by the pointer */
  --ly: 45%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--skylight);
  font-family: var(--text);
  font-size: var(--step-0);
  line-height: 1.62;
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(238,241,242,0.4); transition: color .2s, text-decoration-color .2s; }
a:hover { color: var(--sand); text-decoration-color: var(--sand); }
:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 0.55em; text-wrap: balance; }
h2 { font-size: var(--step-3); letter-spacing: -0.01em; }
h3 { font-size: var(--step-2); }
cite { font-style: italic; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--skylight); color: var(--night); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; }
.wrap { width: min(74rem, 100% - 2 * var(--gutter)); margin-inline: auto; }
.muted { color: var(--ash); }

/* the cover's "— OF —" device: a short rule either side of a small word */
.ruled { display: flex; align-items: center; gap: 1rem; color: var(--bronze); font-size: 1.05rem; font-style: italic; margin: 0 0 1.4rem; }
.ruled::before, .ruled::after { content: ""; height: 1px; width: 2.5rem; background: currentColor; opacity: .7; }
.ruled.center { justify-content: center; }

/* ---------- header ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 30; transition: background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.site-header.scrolled { background: rgba(0,0,0,0.88); backdrop-filter: blur(6px); border-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.1rem; }
.brand { font-family: var(--display); font-size: 1.3rem; text-decoration: none; letter-spacing: 0.04em; }
.nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav a { text-decoration: none; font-size: 1.08rem; color: var(--ash); }
.nav a:hover { color: var(--skylight); }
.lang { display: flex; gap: .35rem; color: var(--ash); }
.lang a[aria-current="true"] { color: var(--skylight); }
.menu-toggle { display: none; background: none; border: 1px solid rgba(238,241,242,.4); color: var(--skylight); font: inherit; font-size: 1rem; padding: .3rem .85rem; border-radius: 2px; cursor: pointer; }

/* ---------- hero: the room ---------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; isolation: isolate; padding-block: 7rem 5rem; }
.hero .light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 9rem 0.5rem at var(--lx) 0%, rgba(238,241,242,.9), transparent 75%),
    radial-gradient(ellipse 34rem 120% at var(--lx) 0%, rgba(214,226,232,.13), transparent 70%),
    radial-gradient(circle 26rem at var(--lx) var(--ly), rgba(214,226,232,.15), transparent 72%),
    radial-gradient(ellipse 20rem 3.2rem at var(--lx) 88%, rgba(214,226,232,.16), transparent 75%);
  opacity: 0;
  animation: light-on 2.6s .25s ease-out forwards;
}
@keyframes light-on { 0%,16% { opacity: 0; } 20% { opacity: .6; } 24% { opacity: .08; } 30% { opacity: .5; } 100% { opacity: 1; } }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero-quote {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--step-4);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  max-width: 17ch;
  text-wrap: balance;
}
.hero-quote .q { color: var(--bronze); }
.hero-meta { font-size: var(--step-1); line-height: 1.4; color: var(--ash); max-width: 27rem; margin-bottom: 2.4rem; }
.hero-meta cite { color: var(--skylight); }
.tilt { perspective: 1200px; }
.tilt img {
  width: min(100%, 25rem); margin-inline: auto;
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.9));
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; translate: -50% 0; color: var(--ash); font-size: 1rem; text-decoration: none; font-style: italic; }

.actions { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; }
.button {
  display: inline-block; cursor: pointer;
  background: var(--skylight); color: var(--night);
  font-family: var(--text); font-size: 1.125rem; text-decoration: none;
  padding: .72rem 1.55rem .78rem; border-radius: 2px; border: 1px solid var(--skylight);
  transition: background .2s, border-color .2s, color .2s;
}
.button:hover { background: var(--sand); border-color: var(--sand); color: var(--night); }
.button.quiet { background: transparent; color: var(--skylight); border-color: rgba(238,241,242,.4); }
.button.quiet:hover { border-color: var(--skylight); color: var(--skylight); }
.text-button { background: none; border: 0; padding: 0; font: inherit; color: var(--skylight); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: rgba(238,241,242,.4); cursor: pointer; }
.text-button:hover { color: var(--sand); }

/* ---------- sections ---------- */
.section { padding-block: clamp(5rem, 11vw, 9rem); }
.section.ruled-top { border-top: 1px solid var(--line); }

/* the first page: a book that opens */
.reader .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.reader-intro p { color: var(--ash); max-width: 26rem; }
.reader-controls { margin-top: 2rem; display: flex; gap: 1.2rem; justify-content: center; }

/* the novel */
.book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.book h2 { font-style: italic; }
.book .blurb { max-width: var(--measure); }
.book .blurb .lede { font-size: var(--step-1); line-height: 1.45; }
.review { margin: 2.6rem 0 0; padding: 1.6rem 0 0; border-top: 1px solid var(--line); max-width: var(--measure); }
.review blockquote { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.35rem; font-style: italic; line-height: 1.4; }
.review figcaption { color: var(--ash); }
.book-side img { width: 100%; max-width: 40rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.6rem; margin: 2rem 0; font-size: 1.05rem; }
.facts dt { color: var(--ash); }
.facts dd { margin: 0; }

/* lines from the book */
.lines { text-align: center; position: relative; isolation: isolate; overflow: hidden; }
.lines::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 34% 60% at 50% 0%, rgba(214,226,232,.10), transparent 70%); }
.line-stage { min-height: 15rem; display: grid; place-items: center; }
.line-stage blockquote { margin: 0; max-width: 46rem; }
.line-stage p { font-family: var(--display); font-style: italic; font-size: clamp(1.8rem, 3.8vw, 3rem); line-height: 1.22; letter-spacing: -0.01em; margin-bottom: 1.4rem; text-wrap: balance; }
.line-stage cite { color: var(--bronze); font-style: normal; font-size: 1.1rem; }
.line-stage blockquote { transition: opacity .45s ease, transform .45s ease; }
.line-stage blockquote.out { opacity: 0; transform: translateY(8px); }
.line-nav { display: flex; justify-content: center; align-items: center; gap: 1.6rem; margin-top: 2.2rem; color: var(--ash); font-size: 1.05rem; }
.line-nav .count { min-width: 4.5rem; font-variant-numeric: lining-nums tabular-nums; }

/* two countries */
.cities { display: grid; grid-template-columns: 1fr minmax(6rem, 1.2fr) 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: center; }
.city h3 { font-size: var(--step-3); margin-bottom: .25rem; }
.city .coords { color: var(--bronze); font-size: 1rem; font-variant-numeric: lining-nums; margin-bottom: 1rem; }
.city p:last-child { color: var(--ash); margin: 0; }
.city.right { text-align: right; }
.route { position: relative; height: 1px; background: linear-gradient(90deg, transparent, var(--bronze) 15%, var(--bronze) 85%, transparent); }
.route span { position: absolute; left: 50%; top: .9rem; translate: -50% 0; white-space: nowrap; color: var(--ash); font-size: 1rem; font-style: italic; font-variant-numeric: lining-nums; }
.route::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--skylight); box-shadow: 0 0 12px var(--skylight); offset-path: none; animation: travel 7s ease-in-out infinite alternate; }
@keyframes travel { from { left: 8%; } to { left: calc(92% - 7px); } }

/* other books */
.others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 4rem); }
.other { display: grid; grid-template-columns: 9rem 1fr; gap: 1.6rem; align-items: start; }
.other img { width: 9rem; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.other:hover img { transform: translateY(-6px) rotate(-1.5deg); }
.other h3 { font-size: var(--step-2); font-style: italic; margin-bottom: .4rem; }
.other p { color: var(--ash); font-size: 1.05rem; }
.question { color: var(--skylight); font-family: var(--display); font-style: italic; font-size: 1.2rem; line-height: 1.4; min-height: 3.4em; transition: opacity .35s; }
.question.out { opacity: 0; }

/* about: the copper and sand of the back cover */
.about { background: linear-gradient(90deg, var(--copper) 0%, #8a6c5c 24%, var(--sand) 50%, #8a6c5c 76%, var(--copper) 100%); color: var(--ink); }
.about .wrap { display: grid; grid-template-columns: 16rem minmax(0, var(--measure)); gap: clamp(2rem, 6vw, 5rem); justify-content: center; align-items: start; }
.about .ruled { color: var(--ink); }
.portrait { aspect-ratio: 4 / 5; max-width: 100%; background: rgba(31,25,21,.12); border: 1px solid rgba(31,25,21,.35); display: grid; place-items: center; color: rgba(31,25,21,.65); font-size: .95rem; text-align: center; padding: 1rem; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.about a { color: var(--ink); text-decoration-color: rgba(31,25,21,.4); }
.signature { font-family: var(--display); font-style: italic; font-size: 1.5rem; margin-top: 1.5rem; }

/* letters */
.newsletter { text-align: center; }
.newsletter .lead { color: var(--ash); max-width: 31rem; margin: 0 auto 2rem; }
.inline-form { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; max-width: 34rem; margin-inline: auto; }
.inline-form input[type="email"] { flex: 1 1 14rem; }

/* forms */
label { display: block; font-size: 1rem; color: var(--ash); margin-bottom: .3rem; }
input, textarea, select { width: 100%; font: inherit; font-size: 1.12rem; color: var(--skylight); background: transparent; border: 0; border-bottom: 1px solid rgba(238,241,242,.45); padding: .55rem .1rem; border-radius: 0; }
textarea { min-height: 9rem; resize: vertical; border: 1px solid rgba(238,241,242,.3); padding: .7rem; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--sand); }
select option { color: #000; }
.bot-field { display: none; }
.consent { font-size: .98rem; color: var(--ash); margin-top: 1rem; }
.contact .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 6rem); }
.field { margin-bottom: 1.4rem; }
.press-list { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.press-list li { padding: .85rem 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; }
.press-list li:last-child { border-bottom: 1px solid var(--line); }
.press-list span { color: var(--ash); font-size: 1rem; }

/* footer */
.site-footer { padding-block: 2.5rem 3rem; color: var(--ash); font-size: 1rem; border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }

/* simple pages */
.simple { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 6rem var(--gutter); }
.simple h1 { font-size: var(--step-3); font-style: italic; }
.simple p { color: var(--ash); max-width: 30rem; margin-inline: auto; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .menu-toggle { display: inline-block; }
  .nav { display: none; position: absolute; top: 100%; right: var(--gutter); flex-direction: column; align-items: flex-end; background: var(--night); padding: 1rem 1.25rem; border: 1px solid var(--line); }
  .nav.open { display: flex; }
  .hero .wrap, .book, .contact .wrap, .about .wrap, .reader .wrap { grid-template-columns: 1fr; }
  .hero { padding-top: 6rem; }
  .hero .tilt { order: -1; }
  .hero .tilt img { width: min(62%, 16rem); }
  .hero-quote { max-width: none; }
  .scroll-cue { display: none; }
  .others { grid-template-columns: 1fr; }
  .about { background: linear-gradient(90deg, #9a7b69 0%, var(--sand) 50%, #9a7b69 100%); }
  .about .portrait { max-width: 14rem; }
  .cities { grid-template-columns: 1fr; text-align: left; }
  .city.right { text-align: left; }
  .route { height: 3rem; width: 1px; margin-left: .4rem; background: linear-gradient(180deg, transparent, var(--bronze) 15%, var(--bronze) 85%, transparent); }
  .route span { top: 50%; left: 1.4rem; translate: 0 -50%; }
  .route::after { left: -3px; animation-name: travel-v; }
  @keyframes travel-v { from { top: 8%; } to { top: 85%; } }
}
@media (max-width: 480px) {
  .other { grid-template-columns: 6.5rem 1fr; }
  .other img { width: 6.5rem; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero .light { animation: none; opacity: 1; }
  .route::after { animation: none; left: calc(50% - 3px); }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* =========================================================
   Daylight sections: after the dark room, the page opens up.
   Clean, airy pages with covers in a grid, praise in large type,
   and a newsletter band in the colours of the back cover.
   ========================================================= */
:root {
  --day: #f2f3f1;        /* cool daylight, the skylight's colour spread out */
  --day-2: #e6e8e5;      /* slightly deeper, for a second light band */
  --ink-soft: #57524e;   /* secondary text on daylight */
  --bronze-ink: #7a5a45; /* bronze, dark enough to read on daylight */
}
.day { background: var(--day); color: var(--ink); }
.day.alt { background: var(--day-2); }
.day a { color: var(--ink); text-decoration-color: rgba(31,25,21,.35); }
.day a:hover { color: var(--bronze-ink); text-decoration-color: var(--bronze-ink); }
.day .muted, .day .facts dt, .day .review figcaption { color: var(--ink-soft); }
.day .ruled { color: var(--bronze-ink); }
.day .button { background: var(--ink); color: var(--day); border-color: var(--ink); }
.day .button:hover { background: var(--bronze-ink); border-color: var(--bronze-ink); color: var(--day); }
.day .button.quiet { background: transparent; color: var(--ink); border-color: rgba(31,25,21,.4); }
.day .button.quiet:hover { border-color: var(--ink); color: var(--ink); }
.day .text-button { color: var(--ink); text-decoration-color: rgba(31,25,21,.35); }
.day .review { border-color: rgba(31,25,21,.15); }
.day label { color: var(--ink-soft); }
.day input, .day textarea, .day select { color: var(--ink); border-color: rgba(31,25,21,.4); }
.day textarea { border-color: rgba(31,25,21,.3); }
.day input::placeholder { color: #8b8580; }
.day input:focus, .day textarea:focus, .day select:focus { border-color: var(--bronze-ink); }
.day .press-list li { border-color: rgba(31,25,21,.15); }
.day .press-list span { color: var(--ink-soft); }
.day :focus-visible { outline-color: var(--bronze-ink); }
.section.day + .section.day { border-top: 1px solid rgba(31,25,21,.1); }
.section.day.alt + .section, .section + .section.day.alt { border-top: 0; }

/* books grid */
.shelf-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); flex-wrap: wrap; }
.shelf-head h2 { margin: 0; }
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.shelf article { display: grid; gap: 1rem; align-content: start; }
.shelf .cover-link { display: block; perspective: 900px; }
.shelf .cover-link img {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 18px 34px -14px rgba(0,0,0,.45);
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  transform-origin: left center;
}
.shelf .cover-link:hover img, .shelf .cover-link:focus-visible img { transform: rotateY(-12deg) translateY(-4px); box-shadow: 0 1px 2px rgba(0,0,0,.12), 18px 26px 40px -16px rgba(0,0,0,.5); }
.shelf h3 { font-size: var(--step-2); font-style: italic; margin: .4rem 0 0; }
.shelf .kind { color: var(--ink-soft); font-size: 1.02rem; margin: 0; }
.shelf .links { display: flex; gap: 1.2rem; flex-wrap: wrap; font-size: 1.05rem; }

/* praise band */
.praise { text-align: center; }
.praise blockquote { margin: 0 auto; max-width: 52rem; font-family: var(--display); font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.7rem); line-height: 1.25; text-wrap: balance; }
.praise figcaption { margin-top: 1.6rem; color: var(--ink-soft); }
.praise .stars { color: var(--bronze-ink); letter-spacing: .3em; margin-bottom: 1.4rem; font-size: 1.1rem; }

/* about in daylight */
.about.day { background: var(--day); color: var(--ink); }
.about.day .portrait { border: 0; background: none; padding: 0; }
.about.day .portrait img { box-shadow: 0 18px 34px -16px rgba(0,0,0,.45); }
.tagline { font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.3; margin: 0 0 1.6rem; color: var(--ink); text-wrap: balance; }

/* newsletter band: the back cover */
.band {
  background: linear-gradient(90deg, var(--copper) 0%, #8a6c5c 22%, var(--sand) 50%, #8a6c5c 78%, var(--copper) 100%);
  color: var(--ink);
}
.band .lead, .band .consent { color: #2f2620; }
.band .ruled { color: var(--ink); }
.band .button { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band .button:hover { background: var(--night); border-color: var(--night); color: var(--paper); }
.band input { color: var(--ink); border-color: rgba(31,25,21,.55); }
.band input::placeholder { color: #3b302a; }
.band :focus-visible { outline-color: var(--ink); }

@media (max-width: 900px) {
  .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band { background: linear-gradient(90deg, #9a7b69 0%, var(--sand) 50%, #9a7b69 100%); }
}
@media (max-width: 520px) {
  .shelf { grid-template-columns: 1fr; max-width: 20rem; margin-inline: auto; }
}
.day .question { color: var(--ink); font-size: 1.15rem; min-height: 3em; margin: 0; }
.shelf .links .text-button { font-size: inherit; }

/* =========================================================
   The echo quest (after the Maison Aïnâri banner):
   guide the light through the room and gather five echoes.
   ========================================================= */
.hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.hero { touch-action: pan-y; cursor: crosshair; }
.hero a, .hero button { cursor: pointer; }
.hero-quest { margin: 1.6rem 0 0; font-style: italic; font-size: 1.05rem; color: var(--bronze); min-height: 1.4em; max-width: 30rem; }
.hero.quest-done .hero-quest { color: #f3e3cc; }

/* metallic bronze lettering, like the cover's ECHOES */
.metal {
  background: linear-gradient(100deg, #8a6a52 0%, #d9bf9f 30%, #fff3e2 50%, #c9a986 70%, #8a6a52 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--bronze);
}
.hero-quote .q { background: linear-gradient(100deg, #8a6a52, #f0dcc2 50%, #b39377); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* the main call to action in metal, glowing once the echoes are gathered */
.hero .button:not(.quiet) {
  background: linear-gradient(135deg, #f6e6cf 0%, #d2b49a 45%, #9c7a60 100%);
  border-color: #e7cfb2; color: #1b120d;
  box-shadow: 0 0 14px rgba(210,180,154,.22);
}
.hero .button:not(.quiet):hover { filter: brightness(1.08); box-shadow: 0 0 22px rgba(240,220,194,.45); }
.hero.quest-done .button:not(.quiet) { animation: cta-glow 2.2s ease-in-out infinite; }
@keyframes cta-glow { 0%,100% { box-shadow: 0 0 0 0 rgba(210,180,154,0); } 50% { box-shadow: 0 0 26px 5px rgba(240,220,194,.5); } }
@media (prefers-reduced-motion: reduce) { .hero.quest-done .button:not(.quiet) { animation: none; box-shadow: 0 0 22px rgba(240,220,194,.45); } }

/* the essay: Who Created God? / Dieu, qui l'a créé ? */
.essay .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.essay .tilt img { width: min(100%, 26rem); filter: drop-shadow(0 30px 40px rgba(0,0,0,.25)); }
.essay h2 { font-style: italic; margin-bottom: .2em; }
.essay .subtitle { color: var(--ink-soft); font-size: var(--step-1); font-style: italic; margin-bottom: 1.6rem; }
.essay .ask { color: #c8302c; font-family: var(--display); font-style: italic; font-size: var(--step-1); line-height: 1.35; }
.essay .text { max-width: var(--measure); }
@media (max-width: 900px) { .essay .wrap { grid-template-columns: 1fr; } .essay .tilt img { width: min(70%, 18rem); margin-inline: auto; } }


/* =========================================================
   The first page: a real book, with thickness, that opens.
   Cover and flyleaf turn on the spine one after the other;
   page edges, spine and a moving shadow give it volume.
   ========================================================= */
.stage {
  --pw: min(19rem, 36vw); --ph: calc(var(--pw) * 1.42); --t: calc(var(--pw) * 0.1);
  --turn: 1.25s; --ease: cubic-bezier(.45,.05,.2,1);
  perspective: 2600px; perspective-origin: 50% 30%;
  display: grid; justify-items: center; padding-block: 4rem 1rem; position: relative;
}
.book3d {
  position: relative; width: var(--pw); height: var(--ph);
  transform-style: preserve-3d; cursor: pointer;
  transform: rotateX(12deg) rotateY(-34deg) rotateZ(2deg);
  transition: transform var(--turn) var(--ease);
}
.book3d:hover:not(.open) { transform: rotateX(10deg) rotateY(-26deg) rotateZ(1.5deg) translateZ(14px); }
.book3d.open { transform: translateX(calc(var(--pw) / 2)) rotateX(22deg) rotateY(0deg) rotateZ(0deg); cursor: default; }
.book3d > div { position: absolute; transform-style: preserve-3d; }

/* back board and page block */
.book3d .board-back { inset: 0; background: #0b0b0b; transform: translateZ(calc(var(--t) / -2)); border-radius: 2px 4px 4px 2px; box-shadow: 0 0 0 1px #000; }
.book3d .edge-r, .book3d .edge-t, .book3d .edge-b {
  background: repeating-linear-gradient(90deg, #ece6da 0 1px, #d9d1c3 1px 2px);
}
.book3d .edge-r { top: 3px; bottom: 3px; width: var(--t); left: calc(var(--pw) - 4px - var(--t) / 2); transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #efe9de 0 1px, #d6cdbe 1px 2px); }
.book3d .edge-t, .book3d .edge-b { left: 2px; right: 4px; height: var(--t); background: repeating-linear-gradient(0deg, #efe9de 0 1px, #d2c9b9 1px 2px); }
.book3d .edge-t { top: calc(3px - var(--t) / 2); transform: rotateX(90deg); }
.book3d .edge-b { top: calc(var(--ph) - 3px - var(--t) / 2); transform: rotateX(-90deg); }
.book3d .spine { top: 0; bottom: 0; width: var(--t); left: calc(var(--t) / -2); transform: rotateY(-90deg); background: linear-gradient(90deg, #050505, #1c1c1c 45%, #070707); }

/* the first page */
.book3d .page {
  inset: 3px 4px 3px 2px; transform: translateZ(calc(var(--t) / 2 - 3px));
  background: linear-gradient(90deg, #ddd5c7 0%, var(--paper) 7%, var(--paper) 100%);
  color: var(--ink); overflow: auto; scrollbar-width: thin;
  padding: calc(var(--pw) * .085) calc(var(--pw) * .08) calc(var(--pw) * .06) calc(var(--pw) * .1);
  font-size: calc(var(--pw) * .047); line-height: 1.5; text-align: justify; hyphens: auto;
}
.book3d .page h3 { font-family: var(--text); font-size: 1.05em; font-weight: 700; text-align: center; margin: .5em 0 .2em; }
.book3d .page .date { text-align: center; font-weight: 700; margin-bottom: 1.3em; }
.book3d .page .runhead { text-align: center; font-size: .82em; margin-bottom: 1.6em; color: #5a504a; }
.book3d .page p { margin: 0 0 .7em; }
.book3d .page .more { text-align: center; font-style: italic; margin-top: 1em; }
.book3d .page a { color: var(--ink); text-decoration-color: rgba(31,25,21,.4); }

/* turning leaves: the flyleaf, then the cover on top */
.book3d .leaf, .book3d .cover { inset: 0; transform-origin: left center; transition: transform var(--turn) var(--ease); }
.book3d .leaf { inset: 3px 4px 3px 1px; transform: translateZ(calc(var(--t) / 2 - 1.5px)); transition-delay: 0s; }
.book3d .cover { transform: translateZ(calc(var(--t) / 2)); transition-delay: .5s; }
.book3d.open .cover { transform: translateZ(calc(var(--t) / 2)) rotateY(-179deg); transition-delay: 0s; }
.book3d.open .leaf { transform: translateZ(calc(var(--t) / 2 - 1.5px)) rotateY(-177deg); transition-delay: .55s; }
.book3d .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.book3d .side.back { transform: rotateY(180deg); }
/* light sweeping across a turning side */
.book3d .side::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity calc(var(--turn) * .5) ease; }
.book3d .cover .front::after { background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.15)); }
.book3d.open .cover .front::after { opacity: 1; }
.book3d .cover .back::after, .book3d .leaf .back::after { background: linear-gradient(270deg, rgba(0,0,0,.45), transparent 60%); opacity: 1; }
.book3d.open .cover .back::after { opacity: 0; transition-delay: calc(var(--turn) * .5); }
.book3d.open .leaf .back::after { opacity: 0; transition-delay: calc(var(--turn) * .5 + .55s); }

.book3d .cover .front { border-radius: 2px 4px 4px 2px; box-shadow: inset 6px 0 8px -4px rgba(255,255,255,.18), inset -1px 0 0 rgba(255,255,255,.08); }
.book3d .cover .front img { width: 100%; height: 100%; object-fit: cover; }
.book3d .cover .front::before { content: ""; position: absolute; left: 4.5%; top: 0; bottom: 0; width: 2px; background: linear-gradient(90deg, rgba(0,0,0,.5), rgba(255,255,255,.12)); z-index: 1; } /* the hinge groove */
.book3d .cover .back { background: linear-gradient(90deg, var(--copper), #8a6c5c 45%, var(--sand)); border-radius: 4px 2px 2px 4px; }
.book3d .leaf .side { background: linear-gradient(90deg, #ddd5c7 0%, var(--paper) 8%); color: var(--ink); display: grid; place-items: center; text-align: center; padding: 12%; }
.book3d .leaf .back { background: linear-gradient(270deg, #ddd5c7 0%, var(--paper) 8%); font-style: italic; font-size: calc(var(--pw) * .052); line-height: 1.7; }
.book3d .leaf .front .ht-title { font-family: var(--display); font-style: italic; font-size: calc(var(--pw) * .085); line-height: 1.15; margin: 0 0 .6em; }
.book3d .leaf .front .ht-author { font-size: calc(var(--pw) * .05); letter-spacing: .08em; margin: 0; }

/* shadow on the floor, widening as the book opens */
.stage .ground {
  position: absolute; left: 50%; bottom: .2rem; width: calc(var(--pw) * 1.05); height: 2.2rem; translate: -45% 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.85), transparent 70%); filter: blur(6px);
  transition: width var(--turn) var(--ease), translate var(--turn) var(--ease);
}
.stage.opened .ground { width: calc(var(--pw) * 2.2); translate: -50% 0; }

@media (max-width: 900px) {
  .stage { --pw: min(17rem, 70vw); overflow: hidden; padding-inline: 1rem; }
  .book3d.open { transform: translateX(calc(var(--pw) * .1)) rotateX(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .stage { --turn: .01s; }
}

/* books shelf: 3D books, two to a row */
.shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); max-width: 60rem; margin-inline: auto; }
.shelf .cover-link { perspective: none; }
.shelf .cover-link img { aspect-ratio: auto; object-fit: contain; box-shadow: none; width: min(100%, 22rem); margin-inline: auto; transform-origin: center bottom; filter: drop-shadow(0 26px 30px rgba(0,0,0,.18)); }
.shelf .cover-link:hover img, .shelf .cover-link:focus-visible img { transform: translateY(-8px) rotate(-1deg); box-shadow: none; filter: drop-shadow(0 34px 34px rgba(0,0,0,.22)); }
.shelf article { text-align: center; justify-items: center; }
.shelf .links { justify-content: center; }
@media (max-width: 640px) { .shelf { grid-template-columns: 1fr; max-width: 22rem; } }
.bookwrap { position: relative; padding-bottom: 1.8rem; display: grid; justify-items: center; }
.bookwrap .book3d { z-index: 1; }
.stage .ground { pointer-events: none; bottom: 0; z-index: 0; }

/* =========================================================
   Open the book: the real printed pages, turned one by one
   (page curl by StPageFlip, MIT licence).
   ========================================================= */
.reader .wrap { display: block; }
.reader-intro { text-align: center; max-width: 36rem; margin: 0 auto clamp(2rem, 5vw, 3.5rem); }
.reader-intro p { margin-inline: auto; }
.flip-stage { position: relative; max-width: 66rem; margin: 0 auto; outline: none; }
.flip-stage::after { /* the table light under the book */
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -2.2rem; height: 3rem; z-index: -1;
  background: radial-gradient(ellipse at center, rgba(214,226,232,.10), transparent 70%);
}
.flip-stage:focus-visible { outline: 2px solid var(--sand); outline-offset: 8px; }
.flipbook { margin: 0 auto; }
.flipbook .pg { background: var(--paper); overflow: hidden; }
.flipbook .pg img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
/* printed pages: white paper turned warm, with the gutter shading of a real spread */
.flipbook .pg.paper img { mix-blend-mode: multiply; }
.flipbook .pg.paper::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.flipbook .pg.paper.--left::after { background: linear-gradient(270deg, rgba(0,0,0,.16), rgba(0,0,0,.04) 6%, transparent 14%); }
.flipbook .pg.paper.--right::after { background: linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.05) 6%, transparent 14%); }
.flipbook .pg.hard { background: #0b0b0b; }
.flipbook .pg.hard img { mix-blend-mode: normal; }
.flipbook .endpaper { width: 100%; height: 100%; background: linear-gradient(90deg, var(--copper), #8a6c5c 45%, var(--sand)); }
.flipbook .pg.end { display: grid; place-items: center; text-align: center; color: var(--ink); }
.flipbook .end-inner { padding: 12%; display: grid; gap: .6rem; justify-items: center; height: 100%; align-content: center; }
.flipbook .end-inner .ruled { color: var(--bronze-ink); }
.flipbook .end-title { font-family: var(--display); font-style: italic; font-size: clamp(1rem, 2.2vw, 1.5rem); line-height: 1.3; }
.flipbook .end-inner .button { background: var(--ink); color: var(--paper); border-color: var(--ink); font-size: 1rem; }
.flipbook .stf__item { box-shadow: 0 0 1px rgba(0,0,0,.4); }
.flip-controls { display: flex; justify-content: center; align-items: center; gap: 1.6rem; margin-top: 2.6rem; flex-wrap: wrap; }
.flip-count { color: var(--ash); font-style: italic; min-width: 12rem; text-align: center; }
.flip-controls .text-button[disabled] { opacity: .35; cursor: default; text-decoration: none; }
.flip-hint { text-align: center; color: var(--ash); font-size: .98rem; margin-top: 1rem; }
.flip-zoom { display: none; text-align: center; margin: 1rem 0 0; }
.page-zoom { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.94); overflow: auto; padding: 4.5rem 1rem 2rem; }
.page-zoom[hidden] { display: none; }
.page-zoom img { width: 100%; max-width: 46rem; margin: 0 auto; background: var(--paper); mix-blend-mode: normal; }
.page-zoom #page-zoom-close { position: fixed; top: max(1rem, env(safe-area-inset-top, 0px)); right: 1rem; background: rgba(0,0,0,.6); }
@media (max-width: 760px) { .flip-zoom { display: block; } }

/* No italics anywhere on the site */
*, *::before, *::after { font-style: normal !important; font-synthesis: none; }

/* =========================================================
   Blog
   ========================================================= */
.blog-page .site-header, .blog-page .site-header.scrolled { background: rgba(0,0,0,.92); border-color: var(--line); }
.blog-page main { padding-top: 4.2rem; }
.blog-head { padding-block: clamp(3.5rem, 8vw, 6rem) clamp(2rem, 4vw, 3rem); }
.blog-head h1 { font-size: var(--step-4); margin-bottom: .3em; }
.blog-head .lead, .post-header .lead { color: var(--ink-soft); font-size: var(--step-1); line-height: 1.45; max-width: 38rem; }
.blog-list .wrap { display: grid; gap: clamp(2.5rem, 5vw, 4rem); max-width: 60rem; }
.post-card { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(1.4rem, 4vw, 2.6rem); align-items: start; }
.post-card-img img { width: 100%; aspect-ratio: 1; object-fit: cover; box-shadow: 0 14px 28px -16px rgba(0,0,0,.45); }
.post-card h2 { font-size: var(--step-2); margin: .2rem 0 .5rem; }
.post-card h2 a { text-decoration: none; }
.post-card p { margin-bottom: .6rem; }
.post-meta { color: var(--bronze-ink); font-size: 1rem; display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.read-more { font-size: 1.05rem; }
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.post-grid .post-card { grid-template-columns: 1fr; }
.post-grid .post-card h2 { font-size: 1.5rem; }
.post .wrap { max-width: 44rem; }
.post-back { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 1.05rem; margin-bottom: 2.4rem; }
.post-header h1 { font-size: var(--step-3); margin-bottom: .4em; }
.post-image { margin: 2.4rem 0; }
.post-image img { width: 100%; box-shadow: 0 18px 36px -18px rgba(0,0,0,.45); }
.post-body { font-size: 1.25rem; line-height: 1.7; }
.post-body h2 { font-size: var(--step-2); margin: 2.2rem 0 .8rem; }
.post-body h3 { font-size: 1.5rem; margin: 1.8rem 0 .6rem; }
.post-body blockquote { margin: 2rem 0; padding: 0 0 0 1.4rem; border-left: 2px solid var(--bronze-ink); font-family: var(--display); font-size: 1.45rem; line-height: 1.45; }
.post-body ul { padding-left: 1.2rem; }
.post-sign { font-family: var(--display); font-size: 1.4rem; margin-top: 2.4rem; }
.post-cta { text-align: center; padding-block: clamp(3.5rem, 8vw, 5.5rem); }
.post-cta h2 { font-size: var(--step-3); }
.post-cta .lead { max-width: 30rem; margin: 0 auto 1.6rem; }
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; max-width: 34rem; } }
@media (max-width: 600px) { .post-card { grid-template-columns: 1fr; } .post-card-img img { max-width: 20rem; } }

/* author portrait: cut out, fading into the page */
.about.day .portrait { aspect-ratio: auto; border: 0; background: none; padding: 0; display: block; }
.about.day .portrait img { box-shadow: none; height: auto; object-fit: contain; }
.about.day .wrap { grid-template-columns: minmax(0, 24rem) minmax(0, var(--measure)); align-items: center; }
@media (max-width: 900px) { .about.day .wrap { grid-template-columns: 1fr; } .about.day .portrait { max-width: 20rem; } }

/* Phones: calmer type sizes */
@media (max-width: 600px) {
  :root { --step-0: 1.08rem; --step-1: 1.22rem; --step-2: 1.4rem; --step-3: 1.75rem; --step-4: 1.95rem; }
  .hero-quote { line-height: 1.12; margin-bottom: 1.4rem; }
  .hero-meta { font-size: 1.12rem; margin-bottom: 1.8rem; }
  .praise blockquote { font-size: 1.3rem; line-height: 1.4; }
  .praise figcaption { font-size: 1rem; }
  .line-stage { min-height: 11rem; }
  .line-stage p { font-size: 1.4rem; }
  .newsletter .lead, .band .lead { font-size: 1.05rem; }
  .consent { font-size: .92rem; }
  .brand { font-size: 1.15rem; }
  .site-header .wrap { padding-block: .8rem; }
  .menu-toggle { font-size: .95rem; padding: .25rem .7rem; }
  .tagline { font-size: 1.3rem; }
  .essay .ask, .essay .subtitle { font-size: 1.15rem; }
  .post-body { font-size: 1.12rem; }
  .post-body blockquote { font-size: 1.2rem; }
  .section { padding-block: 3.5rem; }
}

/* language switch shown next to the Menu button on small screens */
.lang-mobile { display: none; }
@media (max-width: 900px) {
  .lang-mobile { display: inline-flex; margin-left: auto; gap: 0; border: 1px solid rgba(238,241,242,.4); border-radius: 2px; overflow: hidden; }
  .lang-mobile a { padding: .3rem .7rem; font-size: 1rem; line-height: 1.2; text-decoration: none; color: var(--ash); }
  .lang-mobile a[aria-current="true"] { background: var(--skylight); color: var(--night); }
  .nav .lang { display: none; }
}
@media (max-width: 600px) { .lang-mobile a { font-size: .95rem; padding: .25rem .6rem; } }

/* release dates and "coming soon" notes */
.date-note { font-size: 1.05rem; color: var(--ink); margin: .2rem 0 0; }
.date-note strong, .facts strong { font-weight: 700; color: var(--bronze-ink); }
.book-side .date-note { margin-top: 1rem; color: var(--ink-soft); font-size: 1rem; }
.soon-badge { display: inline-block; margin: 0 0 1.2rem; padding: .3rem .9rem; border: 1px solid currentColor; border-radius: 999px; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--bronze-ink); }

/* the book drops onto the table, then opens */
.flipbook.pre-drop { opacity: 0; transform: translateY(-140px) scale(1.12) rotate(-3deg); }
.flip-stage.pre-drop::after { opacity: 0; transform: scale(.6); }
.flipbook.dropping { animation: book-drop .38s cubic-bezier(.55,0,.6,1) both; }
.flip-stage.dropping::after { animation: book-thud .38s ease-out both; }
@keyframes book-drop {
  0%   { opacity: 0; transform: translateY(-140px) scale(1.12) rotate(-3deg); }
  55%  { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
  70%  { transform: translateY(-10px) scale(1.005) rotate(.3deg); }
  85%  { transform: translateY(0) scale(1) rotate(0); }
  92%  { transform: translateY(-2px); }
  100% { opacity: 1; transform: none; }
}
@keyframes book-thud {
  0%, 45% { opacity: 0; transform: scale(.6); }
  58%     { opacity: 1; transform: scale(1.08); }
  100%    { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .flipbook.pre-drop, .flip-stage.pre-drop::after { opacity: 1; transform: none; } }