/* literatura.vmimbrero.com · diseño «Carta»: papel rosado, tinta de vino, cursivas y ornamentos.
   Un solo aspecto, a propósito (como el papel de una carta): no cambia con el modo oscuro. */
:root{
  --papel:#f6eeec; --papel-2:#efe3e0; --tinta:#3b2529; --suave:#8a6a6f; --vino:#8e3b4e; --vino-claro:#b06a7b;
  --linea:rgba(142,59,78,.2); --linea-2:rgba(142,59,78,.35);
  --titulos:"Cormorant Garamond","Cormorant",Garamond,"Times New Roman",serif;
  --texto:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --ancho:36rem; color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 1.16rem/1.75 var(--texto);
  background-image:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.55),transparent 55%),radial-gradient(ellipse at 100% 100%,rgba(176,106,123,.08),transparent 50%);
  background-attachment:fixed;text-rendering:optimizeLegibility;font-feature-settings:"liga","onum"}
a{color:var(--vino);text-decoration:none}
a:hover{color:var(--vino-claro)}
a:focus-visible{outline:2px solid var(--vino);outline-offset:3px;border-radius:2px}
img{max-width:100%;display:block}
::selection{background:rgba(142,59,78,.18)}

/* Barra del autor (solo con la sesión abierta) */
.autor-barra{position:sticky;top:0;z-index:5;background:var(--tinta);color:#f6eeec;font:500 .82rem/1 system-ui,sans-serif;padding:.55rem 1rem;text-align:center}
.autor-barra a{color:#f3d9df}

/* Cabecera */
.cab{max-width:62rem;margin:0 auto;padding:1.6rem 1.25rem 0;display:flex;flex-wrap:wrap;gap:.8rem 2rem;align-items:baseline;justify-content:space-between}
.cab__marca{display:flex;flex-direction:column;line-height:1.05;color:var(--tinta)}
.cab__sitio{font:italic 500 1.65rem/1 var(--titulos);color:var(--vino)}
.cab__autor{font:500 .78rem/1.4 var(--titulos);letter-spacing:.3em;text-transform:uppercase;color:var(--suave);margin-top:.25rem}
.cab__nav{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;font:italic 400 1.12rem/1.3 var(--titulos)}
.cab__nav a{color:var(--tinta);border-bottom:1px solid transparent}
.cab__nav a:hover{color:var(--vino);border-bottom-color:var(--linea-2)}

/* La hoja */
.hoja{max-width:62rem;margin:0 auto;padding:2.4rem 1.25rem 1rem}
.orn{font-family:var(--texto);color:var(--vino);text-align:center;font-size:1.5rem;line-height:1;opacity:.85}
h1,h2,h3{font-family:var(--titulos);font-weight:500;font-style:italic;line-height:1.05;text-wrap:balance;color:var(--tinta)}
.titulo-seccion{text-align:center;font-size:1.7rem;margin:3rem 0 1.2rem}
.titulo-seccion::before,.titulo-seccion::after{content:"—";color:var(--vino-claro);margin:0 .6em;font-style:normal;opacity:.7}
.titulo-seccion a{color:inherit}
.vacio{text-align:center;color:var(--suave);font-style:italic}
.meta{color:var(--suave);font-size:.95rem;margin:.2rem 0 0}
.borrador{font:600 .7rem/1 system-ui,sans-serif;font-style:normal;text-transform:uppercase;letter-spacing:.08em;color:#8a6a2a;background:#f3e6c9;border-radius:999px;padding:.2rem .5rem;margin-left:.5rem;vertical-align:middle}

/* Ilustraciones en arco */
.arco{border-radius:48% 48% 6px 6px / 34% 34% 6px 6px;overflow:hidden;
  box-shadow:0 0 0 1px var(--linea),0 0 0 9px var(--papel),0 0 0 10px var(--linea)}
.arco picture{display:block}
.arco img{width:100%;aspect-ratio:1.5;object-fit:cover;filter:sepia(.14) saturate(.94)}
.arco--portada{max-width:32rem;margin:2rem auto 2.2rem}
.arco--ancho{max-width:46rem;margin:0 auto 2.2rem;border-radius:999px 999px 8px 8px / 62% 62% 8px 8px}
.arco--ancho img{aspect-ratio:2}
/* Versión vertical (3:4): arco de medio punto, como una ventana. El radio horizontal es la mitad del ancho y el vertical,
   esa misma medida sobre el alto (1/2 × 3/4 = 37,5 %), para que la curva sea un semicírculo exacto. */
.arco--vertical{max-width:26rem;margin:0 auto 2.2rem;border-radius:50% 50% 8px 8px / 37.5% 37.5% 8px 8px}
.arco--vertical img{aspect-ratio:3/4}
.arco--peq{border-radius:50% 50% 6px 6px / 36% 36% 6px 6px;margin-bottom:1rem}

/* La prosa */
.prosa{max-width:var(--ancho);margin:0 auto}
.prosa p{margin:0 0 1.05em;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.prosa--capitular > p:first-of-type::first-letter{font:italic 500 4.4em/.74 var(--titulos);float:left;color:var(--vino);padding:.06em .08em 0 0}
.prosa p.verso{text-align:left;hyphens:none;margin-left:1.5rem;font-style:italic;line-height:1.7}
.prosa blockquote{margin:1.6em 0;padding:0 0 0 1.2rem;border-left:2px solid var(--linea-2);font:italic 400 1.3rem/1.5 var(--titulos);color:var(--vino)}
.prosa blockquote p{text-align:left;margin:0 0 .5em}
.prosa h2{font-size:1.7rem;text-align:center;margin:2.2rem 0 1rem}
.prosa h3{font-size:1.35rem;margin:1.8rem 0 .8rem}
.prosa hr.orn{border:0;height:auto;margin:2rem 0;text-align:center}
.prosa hr.orn::after{content:"❦";color:var(--vino);font-size:1.4rem}
.prosa a{border-bottom:1px solid var(--linea-2)}

/* Portada del sitio */
.portada-sitio{text-align:center;margin:1rem 0 3rem}
.portada-sitio h1{font-size:clamp(3rem,8vw,5rem);margin:.4rem 0 .2rem}
.portada-sitio__autor{font:500 .9rem/1.4 var(--titulos);letter-spacing:.34em;text-transform:uppercase;color:var(--suave);margin:0}
.libro-tarjeta{max-width:34rem;margin:0 auto 3rem;text-align:center}
.libro-tarjeta a{color:inherit;display:block}
.libro-tarjeta .arco{margin-bottom:1.4rem;transition:transform .35s}
.libro-tarjeta a:hover .arco{transform:translateY(-3px)}
.libro-tarjeta h2{font-size:clamp(2rem,5vw,2.8rem);margin:0 0 .3rem}
.libro-tarjeta .sub{font-style:italic;color:var(--suave);margin:0}
.categoria-bloque{max-width:var(--ancho);margin:0 auto}
.lista-textos{list-style:none;margin:0;padding:0}
.lista-textos a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.5rem 0;border-bottom:1px dotted var(--linea-2);color:var(--tinta)}
.lista-textos a:hover .lt__tit{color:var(--vino)}
.lt__tit{font:italic 500 1.25rem/1.3 var(--titulos)}
.lt__fecha{font-size:.9rem;color:var(--suave);white-space:nowrap}

/* Portada de un libro */
.libro,.categoria{text-align:center}
.libro h1,.categoria h1{font-size:clamp(2.6rem,6.5vw,4rem);margin:.5rem 0 .4rem}
.libro__autor{font:500 .95rem/1.4 var(--titulos);letter-spacing:.32em;text-transform:uppercase;color:var(--suave);margin:0}
.libro__sub{font-style:italic;color:var(--suave);margin:.5rem 0 0}
.libro .prosa,.categoria .prosa{text-align:left;margin-top:1rem}
.indice{list-style:none;margin:0 auto;padding:0;max-width:30rem;text-align:left}
.indice a{display:flex;align-items:baseline;gap:.7rem;padding:.22rem 0;color:var(--tinta)}
.indice a:hover span{color:var(--vino)}
.indice i{font:italic 500 1.05rem/1 var(--titulos);color:var(--vino);min-width:2.6rem;text-align:right}
.indice span{font-size:1.1rem}
.indice a::after{content:"";flex:1;border-bottom:1px dotted var(--linea-2);transform:translateY(-.3em);order:3;min-width:1rem}
.indice .borrador{order:4}
.empezar{margin:2rem 0 0;font:italic 500 1.3rem/1 var(--titulos)}

/* Categoría */
.articulos{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:2.4rem 2rem;margin-top:2.6rem;text-align:left}
.articulo-tarjeta a{color:inherit;display:block}
.articulo-tarjeta h2{font-size:1.6rem;margin:0}
.articulo-tarjeta a:hover h2{color:var(--vino)}
.extracto{font-size:1rem;line-height:1.6;color:#5b4347;margin:.5rem 0 0}

/* Un texto */
.texto{text-align:center}
.texto__antetitulo{font:italic 400 1.1rem/1.3 var(--titulos);color:var(--suave);margin:0}
.texto__antetitulo a{color:var(--suave);border-bottom:1px dotted var(--linea-2)}
.texto h1{font-size:clamp(2.4rem,6vw,3.6rem);margin:.3rem 0 .6rem}
.texto .orn{margin-bottom:1.6rem}
.texto .prosa{text-align:left}
.fin{color:var(--vino);font-size:1.6rem;margin:2rem 0 2.4rem}
.aviso-borrador{display:inline-block;font:600 .8rem/1 system-ui,sans-serif;color:#8a6a2a;background:#f3e6c9;border-radius:999px;padding:.45rem .9rem;margin:0 0 1.5rem}
.pasar{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem;align-items:baseline;max-width:46rem;margin:0 auto;padding-top:1.2rem;border-top:1px solid var(--linea);font:italic 400 1.15rem/1.3 var(--titulos)}
.pasar span:first-child{text-align:left}
.pasar span:last-child{text-align:right}

.mensaje{text-align:center;padding:3rem 0}
.mensaje h1{font-size:2.6rem;margin:.6rem 0}

/* Pie */
.pie-sitio{text-align:center;color:var(--suave);font-size:.9rem;padding:3rem 1rem 2.4rem}
.pie-sitio p{margin:.6rem 0 0;font-family:var(--titulos);letter-spacing:.12em}


/* La cubierta de un libro: la ilustración entera, sin arco (ya lleva el título dentro), como un libro cerrado
   sobre la mesa: lomo a la izquierda, esquinas apenas redondeadas y una sombra suave. */
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cubierta-pagina{text-align:center;padding-top:.6rem}
.cubierta{position:relative;margin:0 auto;max-width:min(30rem,100%);border-radius:3px 7px 7px 3px;overflow:hidden;
  box-shadow:0 1px 2px rgba(59,37,41,.18),0 22px 44px -18px rgba(59,37,41,.45),0 0 0 1px rgba(59,37,41,.06)}
.cubierta::before{content:"";position:absolute;inset:0 auto 0 0;width:4.5%;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.14) 55%,rgba(0,0,0,.08))}
.cubierta img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.cubierta-pagina .orn{margin:1.8rem 0 .4rem}
.cubierta__entrar{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2.2rem;font:italic 500 1.35rem/1.3 var(--titulos)}
.cubierta--tarjeta{max-width:min(22rem,100%);margin-bottom:1.6rem;transition:transform .35s}
.libro-tarjeta a:hover .cubierta--tarjeta{transform:translateY(-3px)}
/* Las ilustraciones nuevas ya traen su color cálido: sin el velo sepia de las fotos antiguas */
.arco--vertical img,.arco--doble img{filter:none}
/* Ilustraciones de los textos: «álbum de recuerdos». El dibujo entero, como una foto pegada en un álbum,
   con cuatro esquineras de papel y una sombra suave debajo. */
.album{position:relative;margin:0 auto 2.4rem;max-width:min(26rem,100%)}
.album img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;box-shadow:0 2px 3px rgba(59,37,41,.1),0 16px 30px -16px rgba(59,37,41,.5)}
.album picture{display:block}
.album::after{content:"";position:absolute;inset:0;pointer-events:none;--e:clamp(28px,7vw,40px);--c:rgba(251,246,244,.94);
  filter:drop-shadow(0 1px 1px rgba(59,37,41,.35));
  background:
    linear-gradient(135deg,var(--c) 0 50%,transparent 50%) top left / var(--e) var(--e) no-repeat,
    linear-gradient(225deg,var(--c) 0 50%,transparent 50%) top right / var(--e) var(--e) no-repeat,
    linear-gradient(45deg,var(--c) 0 50%,transparent 50%) bottom left / var(--e) var(--e) no-repeat,
    linear-gradient(315deg,var(--c) 0 50%,transparent 50%) bottom right / var(--e) var(--e) no-repeat}
.album--ancho{max-width:min(46rem,100%)}
.album--ancho img{aspect-ratio:2}
/* Artículos de opinión: recorte de prensa. Nada de curvas ni sombras: filete grueso de tinta arriba,
   fino abajo, la foto algo apagada como impresa en papel de diario y nada más: la sección y la fecha ya van en el antetítulo. */
.prensa{margin:0 auto 2.4rem;max-width:min(46rem,100%);border-top:3px solid var(--tinta);border-bottom:1px solid var(--tinta);padding:.5rem 0}
.prensa img{display:block;width:100%;height:auto;aspect-ratio:2;object-fit:cover;filter:grayscale(.35) contrast(1.06) sepia(.08)}
.prensa picture{display:block}
.prensa--vertical{max-width:min(26rem,100%)}
.prensa--vertical img{aspect-ratio:3/4}
.prensa--peq{margin:0 0 1rem;max-width:none;padding:.35rem 0 0;border-bottom:0;border-top-width:2px}
.prensa--peq img{aspect-ratio:3/2;transition:filter .3s}
.articulo-tarjeta a:hover .prensa--peq img{filter:none}
/* Ilustraciones de los capítulos: lámina de grabado, como en los libros ilustrados del XIX.
   El dibujo entero y un doble filete fino (el de fuera, más tenue). Los dos filetes se cortan arriba,
   en el centro, para dejar sitio al ❦: así el adorno no lleva fondo y no tapa nada del dibujo. */
.grabado{position:relative;margin:1rem auto 2.6rem;max-width:min(26rem,100%);padding:12px;--hueco:1.05rem}
.grabado::before,.grabado::after{content:"";position:absolute;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,#000 calc(50% - var(--hueco)),transparent 0 calc(50% + var(--hueco)),#000 0) top/100% 2px no-repeat,linear-gradient(#000,#000) bottom/100% calc(100% - 2px) no-repeat;
          mask:linear-gradient(90deg,#000 calc(50% - var(--hueco)),transparent 0 calc(50% + var(--hueco)),#000 0) top/100% 2px no-repeat,linear-gradient(#000,#000) bottom/100% calc(100% - 2px) no-repeat}
.grabado::before{inset:0;border:1px solid var(--linea-2)}
.grabado::after{inset:-6px;border:1px solid var(--linea)}
.grabado__orn{position:absolute;top:-.62rem;left:50%;transform:translateX(-50%);color:var(--vino);font-size:1.1rem;line-height:1}
.grabado img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.grabado picture{display:block}
.grabado--ancho{max-width:min(46rem,100%)}
.grabado--ancho img{aspect-ratio:2}
@media (max-width:640px){
  body{font-size:1.08rem}
  .hoja{padding-top:1.6rem}
  .cab{flex-direction:column;align-items:center;text-align:center}
  .cab__marca{align-items:center}
  .cab__nav{justify-content:center}
  .prosa p{text-align:left;hyphens:manual}
  .pasar{grid-template-columns:1fr;text-align:center}
  .pasar span:first-child,.pasar span:last-child{text-align:center}
  .arco--doble{max-width:26rem;border-radius:50% 50% 8px 8px / 37.5% 37.5% 8px 8px}
  .arco--doble img{aspect-ratio:3/4}
  .album--doble{max-width:min(26rem,100%)}
  .album--doble img{aspect-ratio:3/4}
  .grabado--doble{max-width:min(26rem,100%)}
  .grabado--doble img{aspect-ratio:3/4}
  .grabado{padding:11px}
  .grabado::after{inset:-5px}
  .prensa--doble{max-width:min(26rem,100%)}
  .prensa--doble img{aspect-ratio:3/4}
}
@media (prefers-reduced-motion:reduce){.libro-tarjeta .arco,.cubierta--tarjeta{transition:none}}
@media print{.cab__nav,.autor-barra,.pasar{display:none}body{background:#fff}}
