/* ---------------------------------------------------------------
   Daniel Odier, site officiel
   Palette lifted from the L'Ardeur cover: blush ground, oxblood type.
   --------------------------------------------------------------- */
:root{
  --paper:#FBF7F5;
  --blush:#F1E5DF;
  --blush-2:#E7D7CF;
  --ink:#1C1815;
  --ink-2:#4A423D;
  --muted:#7C716A;
  --rule:#DFCFC6;
  --red:#8A1C18;
  --red-d:#6E1512;
  --serif:"EB Garamond",Garamond,"Hoefler Text",Georgia,"Times New Roman",serif;
  --max:1200px;
  --pad:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:clamp(1.245rem,.45vw + 1.145rem,1.385rem);
  line-height:1.68;font-feature-settings:"kern" 1,"liga" 1,"onum" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--red);text-decoration:none}
a:hover{color:var(--red-d);text-decoration:underline;text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:99}
.skip:focus{left:.5rem;top:.5rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:60ch;margin-inline:auto}
.narrow-p{max-width:62ch}
.center{text-align:center}

/* ------------------------------------------------------------- header */
.site-head{
  position:sticky;top:0;z-index:50;background:rgba(251,247,245,.94);
  backdrop-filter:saturate(150%) blur(8px);
  border-bottom:1px solid var(--rule);
}
.head-in{display:flex;align-items:center;gap:1.5rem;min-height:4.4rem}
.brand{
  font-size:1.345rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;
}
.brand:hover{color:var(--red);text-decoration:none}
.site-nav{margin-left:auto;display:flex;align-items:center;gap:2rem}
.site-nav ul{display:flex;gap:1.35rem;list-style:none;margin:0;padding:0}
.site-nav a{
  color:var(--ink-2);font-size:1.075rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.35rem 0;position:relative;white-space:nowrap;
}
.site-nav a:hover{color:var(--red);text-decoration:none}
.site-nav a.on{color:var(--ink)}
.site-nav a.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-.1rem;height:1px;background:var(--red);
}
.site-nav a[data-new]{color:var(--red)}
.site-nav a[data-new]:hover{color:var(--red-d)}
.lang{
  display:flex;align-items:flex-start;gap:.55rem;
  font-size:1.065rem;letter-spacing:.1em;
  padding-left:1.4rem;border-left:1px solid var(--rule);
}
/* FR is a span, ES is a link, so without this the anchor inherits
   .site-nav a and arrives with padding and a different colour: it sat lower
   and read thinner than its neighbour. Both are pinned to the same box. */
.site-nav .lang-on,
.site-nav .lang-alt,
.site-nav .lang-soon{
  font-size:1.065rem;letter-spacing:.1em;line-height:1;
  padding:0;margin:0;text-transform:none;white-space:nowrap;
  display:block;
}
.site-nav .lang-on{color:var(--ink)}
.site-nav .lang-alt{color:var(--muted);transition:color .2s}
.site-nav .lang-alt:hover{color:var(--ink);text-decoration:none}
.site-nav .lang-alt.on::after{display:none}
.lang-soon{color:var(--rule);cursor:default}
.burger{display:none;margin-left:auto;background:none;border:0;padding:.6rem;cursor:pointer}
.burger span{display:block;width:24px;height:1px;background:var(--ink);margin:5px 0;transition:.25s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------- hero */
.hero{position:relative;min-height:1100px;display:flex;align-items:center;overflow:hidden;background:#241d1a}
.hero-tall{min-height:min(62vh,560px)}
.hero-img{
  position:absolute;inset:0;
  background:#241d1a url("../img/hero.jpg") center 22% / cover no-repeat;
}
/* Portrait crop of the same Tintoretto for narrow screens. The landscape
   file loses the figure entirely once the viewport goes vertical. */
@media (max-width:860px){
  .hero-img{background-image:url("../img/hero-portrait.jpg");background-position:center 18%}
}
.hero-veil{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(28,24,21,.20) 0%,rgba(28,24,21,.34) 40%,rgba(28,24,21,.86) 100%),
    linear-gradient(270deg,rgba(28,24,21,.70) 0%,rgba(28,24,21,.38) 38%,rgba(28,24,21,0) 70%);
}
.hero-in{
  position:relative;padding-block:clamp(3rem,8vw,6rem);color:#F6EFEA;
  width:min(46ch,100%);margin-left:auto;
}
.hero-t{
  font-size:clamp(3.325rem,8.5vw,6.725rem);line-height:1;margin:.12em 0 .12em;
  font-weight:500;letter-spacing:.01em;
}
.hero-st{font-size:clamp(1.425rem,2.3vw,1.975rem);font-style:italic;color:#E7D6CC;margin:0 0 1.3rem;max-width:30ch;line-height:1.3}
.hero-d{color:#E0D2C9;max-width:44ch;margin:0 0 .9rem;font-size:1.12em}
.hero-meta{font-size:1.075rem;letter-spacing:.14em;text-transform:uppercase;color:#B9A79D;margin:0 0 1.9rem}
.eyebrow{
  font-size:1.075rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin:0 0 .5rem;
}
.hero .eyebrow{color:#D8A79F}

/* ------------------------------------------------------------ buttons */
.btn{
  display:inline-block;background:var(--red);color:#fff;
  padding:.9rem 2rem;font-size:1.075rem;letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--red);cursor:pointer;transition:.2s;
}
.btn:hover{background:var(--red-d);border-color:var(--red-d);color:#fff;text-decoration:none}
.btn-ghost{background:transparent;color:var(--red)}
.btn-ghost:hover{background:var(--red);color:#fff}
.btn-light{background:#F6EFEA;color:var(--ink);border-color:#F6EFEA}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.link-arrow{font-size:1.105rem;letter-spacing:.11em;text-transform:uppercase}
.link-arrow::after{content:" \2192"}

/* -------------------------------------------------------------- bands */
.band{padding-block:clamp(3.2rem,7vw,6rem)}
.band-tight{padding-block:clamp(2.2rem,4vw,3.4rem)}
.band-alt{background:var(--blush)}
.band-ink{background:var(--ink);color:var(--blush)}
.band-ink .lead{color:#CBBDB5}
.band-ink a{color:#E5C6BF}
.h-big{font-size:clamp(2.225rem,5vw,3.625rem);line-height:1.05;margin:0 0 .4em;font-weight:500}
.h-rule{
  font-size:1.125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  margin:0 0 2rem;padding-bottom:.7rem;border-bottom:1px solid var(--rule);font-weight:600;
}
.h-plain{font-size:clamp(1.625rem,3vw,2.225rem);margin:0 0 .5em;font-weight:500}
.lead{font-size:1.1em;color:var(--ink-2);margin:0 0 1.2rem}
.prose p{margin:0 0 1.15em;color:var(--ink-2)}
.prose-lg p{font-size:1.06em}
.prose p:first-child{font-size:1.08em;color:var(--ink)}
.credit{font-size:1.105rem;color:var(--muted);margin:0 0 1rem}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.two-col-wide{grid-template-columns:minmax(0,1fr) minmax(0,1.9fr)}
.portrait{margin:0}
/* Portrait always reads black and white, on the home page and the author page. */
.portrait img{filter:grayscale(100%) contrast(1.04);border:1px solid var(--rule)}
.pull{
  margin:1.8rem 0;padding-left:1.4rem;border-left:2px solid var(--red);
}
.pull p{font-style:italic;font-size:1.14em;margin:0 0 .35em;color:var(--ink)}
.pull cite{font-style:normal;font-size:1.075rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* --------------------------------------------------------------- grid */
.grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card a{display:block;color:var(--ink)}
.card a:hover{text-decoration:none}
.card a:hover .card-t{color:var(--red)}
.cover{
  display:block;position:relative;aspect-ratio:2/3;margin-bottom:.9rem;
  background:var(--blush-2);border:1px solid var(--rule);overflow:hidden;
  transition:.25s;
}
.card a:hover .cover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(28,24,21,.14)}
.cover-img{width:100%;height:100%;object-fit:cover}
.cover-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;
  padding:1.1rem .9rem;text-align:center;
  background:repeating-linear-gradient(135deg,#E7D7CF 0 12px,#E2D0C7 12px 24px);
}
.cover-ph-t{font-size:1.105rem;line-height:1.3;color:#6E625B;align-self:center;margin-top:auto;margin-bottom:auto}
.cover-ph-r{font-size:1.075rem;letter-spacing:.12em;text-transform:uppercase;color:#8C7F77}
.card-t{display:block;font-size:1.04em;line-height:1.3;margin-bottom:.2rem;transition:.2s}
.card-m{display:block;font-size:1.075rem;letter-spacing:.04em;color:var(--muted)}

.jump{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.jump a{
  font-size:1.075rem;letter-spacing:.11em;text-transform:uppercase;
  border:1px solid var(--rule);padding:.55rem 1.1rem;color:var(--ink-2);
}
.jump a:hover{border-color:var(--red);color:var(--red);text-decoration:none}
.jump span{color:var(--muted)}

/* ----------------------------------------------------------- book page */
.crumbs{font-size:1.075rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:1.6rem}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--red)}
.crumbs span{margin:0 .45rem}
.book-lay{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cover-lg{aspect-ratio:2/3;margin-bottom:1.4rem}
.book-st{font-size:1.14em;font-style:italic;color:var(--ink-2);margin:-.4em 0 1.6rem}
.book-meta{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.6rem;margin:0 0 1.8rem;font-size:1.145rem}
.book-meta dt{font-size:1.065rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);padding-top:.22em}
.book-meta dd{margin:0;color:var(--ink-2)}
.buys{display:flex;flex-wrap:wrap;gap:.8rem;margin:0 0 2.2rem}
.buys-col{flex-direction:column}
.buys-col .btn{text-align:center}
.oos{
  font-size:1.125rem;color:var(--ink-2);background:var(--blush);
  border-left:2px solid var(--blush-2);padding:.7rem 1rem;margin:0 0 1.4rem;
}
.oos-hard{border-left-color:var(--muted);margin-bottom:2.2rem}
.pager-in{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center}
.pager-l,.pager-r{display:block;font-size:1.205rem;color:var(--ink)}
.pager-r{text-align:right}
.pager-l span,.pager-r span{display:block;font-size:1.065rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.pager-c{font-size:1.075rem;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}

/* ----------------------------------------------------------------- faq */
.faq details{border-bottom:1px solid var(--rule);padding:.2rem 0}
.faq summary{
  cursor:pointer;padding:1rem 0;font-size:1.05em;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.2em;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 1.2rem;color:var(--ink-2);max-width:70ch}

/* --------------------------------------------------------------- forms */
.nl{max-width:34rem;margin:1.6rem auto 0;display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.nl input[type=email]{
  flex:1 1 16rem;background:transparent;border:1px solid #4A423D;color:var(--blush);
  padding:.82rem 1rem;font-family:inherit;font-size:1.125rem;
}
.nl input[type=email]::placeholder{color:#8A7C74}
.nl-legal{flex:1 1 100%;font-size:1.085rem;color:var(--muted);margin:.4rem 0 0;text-align:left;line-height:1.5}
.band-ink .nl-legal{color:#9E8F87}
.nl-legal input{margin-right:.5rem}
.cform{margin-top:2rem}
.f-row{margin-bottom:1.3rem}
.f-row label{display:block;font-size:1.075rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.f-row input,.f-row select,.f-row textarea{
  width:100%;background:#fff;border:1px solid var(--rule);color:var(--ink);
  padding:.75rem .9rem;font-family:inherit;font-size:1.125rem;
}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{border-color:var(--red)}
.f-row textarea{resize:vertical}
.form-msg{flex:1 1 100%;font-size:1.125rem;margin:.9rem 0 0;min-height:1.2em}
.form-msg.ok{color:#5F7052}
.form-msg.err{color:var(--red)}
.alt-contact{margin-top:2.4rem;font-size:1.145rem;color:var(--muted)}

/* -------------------------------------------------------------- footer */
.site-foot{background:var(--ink);color:#B5A69E;padding-block:clamp(2.6rem,5vw,4rem);margin-top:0}
.foot-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.4rem}
.foot-brand{font-size:1.225rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blush);margin:0 0 .6rem}
.foot-note{font-size:1.085rem;line-height:1.6;margin:0 0 .6rem;color:#9A8B83}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.5rem}
.site-foot a{color:#CBBDB5;font-size:1.125rem}
.site-foot a:hover{color:#fff}

/* ------------------------------------------------------------ responsive */
@media (max-width:1000px){
  .grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .two-col,.two-col-wide{grid-template-columns:1fr}
  .portrait{max-width:22rem}
  .book-lay{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}
@media (max-width:860px){
  .burger{display:block}
  .site-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--rule);
    flex-direction:column;align-items:flex-start;gap:0;padding:.5rem var(--pad) 1.4rem;
  }
  .site-nav.open{display:flex}
  .site-nav ul{flex-direction:column;gap:0;width:100%}
  .site-nav li{border-bottom:1px solid var(--rule);width:100%}
  .site-nav a{display:block;padding:1rem 0;font-size:1.145rem}
  .lang{border-left:0;padding-left:0;padding-top:1rem}
}
@media (max-width:680px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .book-lay{grid-template-columns:1fr}
  .book-cover{max-width:16rem}
  .foot-in{grid-template-columns:1fr;gap:1.8rem}
  .pager-in{grid-template-columns:1fr;text-align:left}
  .pager-r{text-align:left}
  .hero{min-height:min(78vh,680px)}
  /* on a narrow screen the horizontal wash is pointless, the text sits full width */
  .hero-veil{
    background:linear-gradient(180deg,rgba(28,24,21,.16) 0%,rgba(28,24,21,.40) 42%,rgba(28,24,21,.90) 100%);
  }
  .hero-in{width:100%;margin-left:0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  .site-head,.site-foot,.buys,.pager,.band-ink{display:none}
  body{background:#fff;color:#000}
}

/* ------------------------------------------------- book strip (footer) */
/* Native overflow scrolling does the swiping. The chevrons are for mice, and
   sit outside the covers rather than floating above them. */
.strip-band{padding-block:clamp(2.4rem,4vw,3.4rem);overflow:hidden}
.strip-band .h-rule{margin-bottom:1.6rem}

.strip-row{
  display:flex;align-items:center;justify-content:center;
  gap:75px;                       /* clear space between chevron and covers */
  padding-inline:1rem;
}
.strip-b{
  flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;
  color:var(--muted);             /* same ink as the heading above */
  display:grid;place-items:center;transition:color .2s,opacity .2s;
}
.strip-b:hover:not(:disabled){color:var(--red)}
.strip-b:disabled{opacity:.22;cursor:default}
.strip-b svg{display:block}

.strip{
  flex:1 1 var(--max);max-width:var(--max);min-width:0;
  list-style:none;margin:0;display:flex;gap:1.4rem;
  padding:.4rem 0 1.2rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.strip-i{flex:0 0 130px;scroll-snap-align:start}
.strip-i a{display:block;color:var(--ink-2)}
.strip-i a:hover{text-decoration:none;color:var(--red)}
.strip-i .cover{margin-bottom:.5rem}
.strip-i a:hover .cover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(28,24,21,.16)}
.strip-t{
  display:block;font-size:1.075rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
@media (max-width:1100px){ .strip-row{gap:36px} }
@media (max-width:680px){
  .strip-row{gap:0;padding-inline:0}
  .strip{padding-inline:var(--pad)}
  .strip-i{flex:0 0 112px}
  .strip-b{display:none}          /* a phone already swipes */
}

/* --------------------------------------------------------------- video */
.video{
  position:relative;aspect-ratio:16/9;background:var(--ink);
  border:1px solid var(--rule);overflow:hidden;
}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.9rem;text-align:center;
  padding:2rem;color:#BFB0A8;
  background:repeating-linear-gradient(135deg,#221D1A 0 16px,#1C1815 16px 32px);
}
.video-ico{
  width:4.4rem;height:4.4rem;border:1px solid #6B5F58;border-radius:50%;
  display:grid;place-items:center;font-size:1.525rem;color:#E5C6BF;
}
.video-ph p{margin:0;font-size:1.125rem;max-width:44ch}
.video-help{color:#8A7C74;font-size:1.075rem}
.video-help code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.95em}

/* -------------------------------------------------------------- journal */
.post-list{list-style:none;margin:0;padding:0}
.post-list li{border-bottom:1px solid var(--rule);padding:1.6rem 0}
.post-list li:first-child{border-top:1px solid var(--rule)}
.post-d{font-size:1.075rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 .3rem}
.post-t{font-size:1.625rem;line-height:1.25;margin:0 0 .4rem;font-weight:500}
.post-x{margin:0;color:var(--ink-2)}
.empty{
  border:1px dashed var(--rule);padding:2.4rem;text-align:center;color:var(--ink-2);
}
.empty p{margin:0 0 .8rem}
.empty p:last-child{margin:0}

/* Video block: wider and lifted on desktop only. On a phone it already fills
   the column, and pulling it up there would collide with the buy buttons. */
@media (min-width:861px){
  .band-video{margin-top:-150px}
  .band-video .narrow{max-width:90ch}
}

/* On a phone the painting is the point, so stop laying type over her.
   The image gets its own full-width block at the portrait file's exact
   ratio, so nothing is cropped, and the text sits underneath it. */
@media (max-width:860px){
  .hero,.hero-tall{display:block;min-height:0;align-items:initial}
  .hero-img{position:static;width:100%;aspect-ratio:1200/1482;background-position:center center}
  .hero-veil{display:none}
  .hero-in{
    position:static;width:100%;margin:0;
    padding:2.2rem var(--pad) 2.8rem;background:#241d1a;
  }
}

/* ------------------------------------------------------------- consent bar */
/* Only rendered when Google Analytics is configured. Refusing is the same
   size and weight as accepting: a decline that is harder to click is not a
   free choice, and regulators treat it as no consent at all. */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--ink);color:var(--blush);
  border-top:1px solid #3A322D;padding:1.1rem 0;
}
.consent[hidden]{display:none}
.consent-in{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap}
.consent-t{flex:1 1 22rem;margin:0;font-size:1.125rem;line-height:1.5;color:#CBBDB5}
.consent-t a{color:#E5C6BF}
.consent-b{display:flex;gap:.7rem;flex-shrink:0}
.consent .btn-ghost{color:#E5C6BF;border-color:#6B5F58}
.consent .btn-ghost:hover{background:#E5C6BF;color:var(--ink);border-color:#E5C6BF}
@media (max-width:680px){
  .consent-b{width:100%}
  .consent-b .btn{flex:1;text-align:center;padding-inline:1rem}
}

/* Spanish edition: El Ardor carries its own cover art, so the hero changes
   with the language rather than reusing the French Tintoretto crop. */
html[lang="es"] .hero-img{background-image:url("../img/hero-es.jpg")}
@media (max-width:860px){
  html[lang="es"] .hero-img{background-image:url("../img/hero-portrait-es.jpg")}
}

/* ---------------------------------------------- Spanish hero placement */
/* Only above 1100px: below that there is not enough room to shift the block
   without pushing it off screen. */
@media (min-width:1200px){
  /* the 320px shift is for the home banner only. The El Ardor banner
     keeps its own place, otherwise the wider text block runs off the
     right edge on a 1280px screen. */
  html[lang="es"] .hero:not(.hero-tall) .hero-in{transform:translateX(320px)}
  /* The hero centres its content, so padding would split any change between
     top and bottom. A relative offset lifts the block by exactly 50px,
     leaving 50px more artwork visible below the button. */
  html[lang="es"] .hero:not(.hero-tall) .hero-in{top:-50px}
}
/* El Ardor page: the words move clear of the figures. The full 300px only
   fits from 1400px up. Below that the block would run past the right edge,
   so the shift is reduced rather than dropped. Both values were measured,
   not guessed. */
@media (min-width:1200px) and (max-width:1399px){
  html[lang="es"] .hero-tall .hero-in{transform:translateX(180px)}
}
@media (min-width:1400px){
  html[lang="es"] .hero-tall .hero-in{transform:translateX(300px)}
}
/* On desktop the El Ardor artwork carries no veil at all: the painting is
   pale enough to read dark type straight off it, so the overlay was only
   muddying the image. Mobile is untouched, where the text sits below the
   picture on its own dark panel and still needs light type. */
@media (min-width:861px){
  html[lang="es"] .hero-veil{display:none}
  html[lang="es"] .hero-in{color:#1C1815}
  html[lang="es"] .hero-in .eyebrow,
  html[lang="es"] .hero-st,
  html[lang="es"] .hero-d,
  html[lang="es"] .hero-meta{color:#1C1815}
  html[lang="es"] .hero-t{color:#A91718}   /* taken from the cover */
  html[lang="es"] .hero-in .btn-light{
    background:#A91718;color:#fff;border-color:#A91718;
  }
  html[lang="es"] .hero-in .btn-light:hover{
    background:#1C1815;border-color:#1C1815;color:#fff;
  }
}

/* --------------------------------------------- edition language badge */
.ed-tag{
  display:inline-block;margin-left:.5em;vertical-align:middle;
  font-size:.72em;letter-spacing:.05em;text-transform:none;
  padding:.12em .5em;border:1px solid currentColor;border-radius:2px;
  white-space:nowrap;
}
.ed-es{color:var(--red)}
.ed-fr{color:var(--muted)}

/* --------------------- Spanish El Ardor banner: picture only, no words */
@media (min-width:861px){
  /* nudge the artwork up so the two figures sit in the frame */
  /* up 190px so the figures sit in frame, and 150px left so the artwork
     clears the text block that now sits to its right. */
  /* background-size:cover leaves no horizontal slack on a wide banner, so
     sliding the artwork sideways exposed the dark backing colour down the
     right edge. Oversizing it gives room to move. */
  html[lang="es"] .hero-tall .hero-img{
    background-size:125% auto;
    background-position:calc(50% - 150px) 62%;
  }
  /* Home banner: raise the artwork so its own printed title leaves the frame.
     It repeated, word for word, the heading set beside it. */
  /* The Spanish banner is composed for this box, so it needs no shifting.
     Every earlier nudge existed to work around artwork of the wrong shape. */
  html[lang="es"] .hero:not(.hero-tall) .hero-img{background-position:center center}
}
/* The title moved out of the banner and into the page, so it needs to own
   the full width above the cover-and-text columns. */
.book-head{grid-column:1 / -1;margin-bottom:1.6rem}
.book-head .h-big{margin:.2rem 0 .4rem}
.book-head .book-st{margin:0;color:var(--muted)}

/* NUEVO LIBRO . EDICIONES LA LLAVE is long once it is uppercase and letter
   spaced, so it wrapped. The banner block gets the room to hold it on one
   line; the wrap is allowed back below 1100px where there is no space. */
/* The eyebrow must hold one line on every desktop width, not just wide ones.
   The measured line is about 590px, so it fits from 861px up. width caps at
   100% of the wrap, so widening the block can never cause an overflow. */
@media (min-width:861px){
  html[lang="es"] .hero-tall .hero-in{width:min(62ch,100%)}
  html[lang="es"] .hero-tall .hero-in .eyebrow{white-space:nowrap}
  html[lang="es"] .hero-in .hero-meta{white-space:nowrap}
}

/* The Klaviyo embed supplies its own background, padding and heading, so this
   wrapper contributes nothing of its own. Before, an unrendered form left a
   tall dark empty slab where the band's padding used to be. */
.nl-embed{margin:0;padding:0;background:none;border:0}
/* .wrap carries horizontal padding only, so the column is restored without
   putting any height back when the form has not rendered. */
.nl-embed > .wrap{padding-block:0}

/* Full-width dark band, but ONLY once Klaviyo has actually put a form inside.
   :has() means an unrendered or blocked form still paints nothing, so the
   empty slab cannot come back. */
.nl-embed:has(form){
  background:var(--ink);
  padding-block:clamp(3.2rem,7vw,6rem);
}
/* Klaviyo paints its own panel with inline styles, which would sit as a
   second darker box inside the band. Flatten it so the band reads as one
   surface. !important is required: these are inline styles. */
.nl-embed:has(form) .klaviyo-form div[class*="kl-private-reset"],
.nl-embed:has(form) form{
  background:transparent !important;
  background-color:transparent !important;
}
/* The dismiss link ships as near-black on near-black. Make it legible. */
.nl-embed:has(form) form a,
.nl-embed:has(form) [class*="kl-private"] a{
  color:#E8DDD6 !important;
  opacity:1 !important;
  transition:color .2s;
}
.nl-embed:has(form) form a:hover,
.nl-embed:has(form) [class*="kl-private"] a:hover{
  color:#B9A79D !important;
}
.nl-embed > div:empty{display:none}
@media print{.nl-embed{display:none}}

/* French hero: block shifted right on wide desktop only, so it can never be
   pushed past the right edge on a narrower screen. */
@media (min-width:1200px){
  html[lang="fr"] .hero:not(.hero-tall) .hero-in{transform:translateX(150px)}
}