/* ultra_library · a lombada ------------------------------------------------
   Anatomia comum (compartimentos, nervuras, título, autor, ano, monograma) e
   os 14 templates de encadernação. A face que o leitor vê na estante. */

/* anatomia comum a todos os templates -------------------------------------- */
.spine {
  --pad: max(5px, calc(var(--t) * .09));       /* margem lateral proporcional à espessura */
  --gold-ink: #f1dc94;                          /* ouro estampado */
  --gold-line: rgba(222,186,90,.8);
  --sheen:
    linear-gradient(180deg, rgba(255,255,255,.07), transparent 22%, transparent 78%, rgba(0,0,0,.2)),
    linear-gradient(90deg, rgba(0,0,0,.6) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.03) 40%, rgba(0,0,0,.14) 76%, rgba(0,0,0,.65) 100%);
  width: var(--t); height: var(--h);
  transform: translateZ(calc(var(--w) / 2));
  border-radius: 3px 3px 2px 2px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), inset 1px 0 0 rgba(255,255,255,.1);
  display: flex; flex-direction: column;
  padding: 0;
}
/* pequeno vinco de cabeça e pé (a virada do couro nas extremidades) */
.spine-crown, .spine-heel { flex: none; height: 6px; width: 100%; }
.spine-crown { background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(255,255,255,.12) 45%, transparent); border-top: 1px solid rgba(255,255,255,.18); }
.spine-heel  { background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.15) 60%, transparent); }

.spine-comp {
  position: relative; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 100%; place-items: center; align-content: center;
  padding: 4px var(--pad);
}
.spine-rib { flex: none; display: none; }
.spine-label-box, .spine-author-box {
  width: 100%; height: 100%; min-height: 0;
  display: grid; place-items: center; grid-template-columns: 100%;
  overflow: hidden;
}

/* texto: o fitter (library.js) reduz a fonte até caber; se não couber, .v vira vertical */
.spine-title {
  display: block; width: 100%; max-height: 100%; overflow: hidden;
  text-align: center; line-height: 1.12; text-wrap: balance;
  overflow-wrap: normal; hyphens: manual;
  color: var(--gold-ink);
  text-shadow: 0 1px 0 rgba(0,0,0,.65), 0 0 2px rgba(0,0,0,.4);
  font-weight: 600; font-size: 14px;
}
.spine-author {
  display: block; max-width: 100%; max-height: 100%; overflow: hidden; text-align: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.3;
  color: var(--gold-ink); text-shadow: 0 1px 0 rgba(0,0,0,.6);
  overflow-wrap: normal;
}
.spine-author[data-layout="v"], .spine-author.v { writing-mode: vertical-rl; width: auto; letter-spacing: .14em; white-space: nowrap; }
.spine-title.v, .spine-title.vertical {
  writing-mode: vertical-rl; width: auto; max-width: 100%; height: auto; max-height: 100%;
  text-align: center; text-wrap: balance;
}
.spine-ornament { font-size: 9px; color: var(--gold); opacity: .8; text-shadow: 0 1px 1px rgba(0,0,0,.7); line-height: 1; }
.spine-year {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .1em; line-height: 1.35; white-space: nowrap;
  text-align: center;                           /* anos a.C. quebram em duas linhas via <br> */
  color: var(--gold-ink); text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.foot-comp { gap: 4px; align-content: end; padding-bottom: 6px; }
.spine-mark, .cover-mark {
  width: 15px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--display); font-style: italic; font-weight: 600; font-size: 7.5px; line-height: 1;
  letter-spacing: -.04em; font-variation-settings: "opsz" 9;
  color: var(--gold-ink); text-shadow: 0 1px 0 rgba(0,0,0,.6);
  border: 1px solid var(--gold-line);
  box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 0 0 3px rgba(222,186,90,.4), inset 0 0 3px rgba(0,0,0,.5);
}

/* Tamanhos por espessura (ponto de partida; o fitter só reduz) */
.spine[data-tier="thin"]        { --fs-h: 12px; --fs-v: 15px; }
.spine[data-tier="regular"]     { --fs-h: 13px; --fs-v: 17px; }
.spine[data-tier="thick"]       { --fs-h: 15px; --fs-v: 20px; }
.spine[data-tier="monumental"]  { --fs-h: 17px; --fs-v: 23px; }
.spine .spine-title { font-size: var(--fs-h); }
.spine .spine-title.vertical, .spine .spine-title.v { font-size: var(--fs-v); }

/* ========================================================================= */
/* TEMPLATE 1: FÓLIO CLÁSSICO — nervuras em relevo, etiquetas de couro        */
/* ========================================================================= */
.spine[data-template="1"] .comp-1 { flex: 0 0 8%; }
.spine[data-template="1"] .comp-2 { flex: 0 0 30%; padding: 6px var(--pad); }
.spine[data-template="1"] .comp-3 { flex: 0 0 14%; padding: 5px var(--pad); }
.spine[data-template="1"] .comp-4 { flex: 1 1 auto; }
.spine[data-template="1"] .comp-5 { flex: 0 0 13%; }

.spine[data-template="1"] .spine-rib {
  display: block; height: 7px; width: 100%;
  background: linear-gradient(180deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.06) 40%, rgba(0,0,0,.55) 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.55), 0 -1px 1px rgba(0,0,0,.25);
  position: relative;
}
.spine[data-template="1"] .spine-rib::before, .spine[data-template="1"] .spine-rib::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, #fff3c8 50%, var(--gold-line) 82%, transparent);
  opacity: .85;
}
.spine[data-template="1"] .spine-rib::before { top: -3px; }
.spine[data-template="1"] .spine-rib::after  { bottom: -3px; }

/* etiquetas de couro de outra cor (o "título" e o "autor" em peças coladas) */
.spine[data-template="1"] .spine-label-box,
.spine[data-template="1"] .spine-author-box {
  --label: hsl(var(--hue2, calc(var(--hue) + 24)) 34% 15%);
  background-color: var(--label);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 35%, rgba(0,0,0,.25)),
    linear-gradient(90deg, rgba(0,0,0,.3), transparent 15%, transparent 85%, rgba(0,0,0,.35)),
    var(--pebble);
  background-size: auto, auto, 110px 110px;
  background-blend-mode: normal, normal, soft-light;
  border: 1px solid var(--gold-line);
  outline: 1px solid rgba(222,186,90,.4); outline-offset: 2px;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.6);
  padding: 5px 5px;
  margin: 3px;
  width: calc(100% - 6px); height: calc(100% - 6px);
}
.spine[data-template="1"] .spine-title { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.spine[data-template="1"] .spine-author-box { display: grid; place-items: center; overflow: hidden; }
.spine[data-template="1"] .spine-ornament { font-size: 11px; }

/* ========================================================================= */
/* TEMPLATE 2: ESTAMPAGEM A OURO DE BIBLIOTECA — filetes duplos, tudo em ouro */
/* ========================================================================= */
.spine[data-template="2"] .spine-rib.rib-1, .spine[data-template="2"] .spine-rib.rib-4 {
  display: block; height: 4px; width: calc(100% - 2 * var(--pad)); margin: 3px auto;
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  box-shadow: 0 1px 1px rgba(0,0,0,.5);
}
.spine[data-template="2"] .comp-1 { flex: 0 0 5%; }
/* painel de título na segunda cor, emoldurado pelos filetes de ouro —
   véu que só troca o matiz: o couro, o grão e o brilho são os da lombada */
.spine[data-template="2"] .comp-2 {
  flex: 0 0 42%;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.35), inset 0 -1px 0 rgba(0,0,0,.35);
}
.spine[data-template="2"] .comp-2::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c2, var(--c)); mix-blend-mode: color;
}
.spine[data-template="2"] .comp-3 { flex: 0 0 16%; }
.spine[data-template="2"] .comp-4 { flex: 1 1 auto; }
.spine[data-template="2"] .comp-5 { flex: 0 0 14%; }
.spine[data-template="2"] .spine-title { text-transform: uppercase; letter-spacing: .08em; line-height: 1.22; }
.spine[data-template="2"] .spine-author { letter-spacing: .14em; }
.spine[data-template="2"] .spine-ornament { font-size: 0; }
.spine[data-template="2"] .spine-ornament::before {
  content: ""; display: block; width: 22px; height: 1px; background: var(--gold-line);
  box-shadow: 0 3px 0 var(--gold-line);
}

/* ========================================================================= */
/* TEMPLATE 3: TECIDO COM FILETES — título vertical, autor no pé              */
/* ========================================================================= */
.spine[data-template="3"] .spine-rib.rib-1, .spine[data-template="3"] .spine-rib.rib-4 {
  display: block; height: 3px; width: calc(100% - 2 * var(--pad)); margin: 4px auto;
  border-top: 1px solid rgba(0,0,0,.5); border-bottom: 1px solid rgba(255,255,255,.18);
}
.spine[data-template="3"] .comp-1, .spine[data-template="3"] .comp-4 { display: none; }
.spine[data-template="3"] .comp-2 { flex: 1 1 auto; padding: 8px var(--pad); }
.spine[data-template="3"] .comp-3 { flex: 0 0 auto; max-height: 26%; padding: 4px var(--pad); }
.spine[data-template="3"] .comp-5 { flex: 0 0 12%; }
.spine[data-template="3"] .spine-title { color: var(--cream); font-weight: 500; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.spine[data-template="3"] .spine-author { color: var(--cream); font-size: 9px; }
.spine[data-template="3"] .spine-year { color: var(--cream-dim); }
.spine[data-template="3"] .spine-mark { color: var(--cream); border-color: rgba(239,232,216,.55); box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 0 0 3px rgba(239,232,216,.25); }

/* ========================================================================= */
/* TEMPLATE 4: CARTELA DE PAPEL — etiqueta colada, tipografia preta           */
/* ========================================================================= */
/* cabeça e pé mergulhados na segunda cor (tingimento das viradas) —
   véus de matiz sobre o material contínuo da lombada */
.spine[data-template="4"] .comp-1 {
  flex: 0 0 5%;
  border-bottom: 1px solid rgba(0,0,0,.35);
}
.spine[data-template="4"] .comp-1::before, .spine[data-template="4"] .comp-5::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c2, var(--c)); mix-blend-mode: color;
}
.spine[data-template="4"] .comp-2 { flex: 0 0 38%; padding: 4px calc(var(--pad) - 1px); }
.spine[data-template="4"] .comp-3 { flex: 0 0 auto; max-height: 24%; }
.spine[data-template="4"] .comp-4 { flex: 1 1 auto; }
.spine[data-template="4"] .comp-5 {
  flex: 0 0 13%;
  background-image: linear-gradient(0deg, rgba(0,0,0,.28), transparent 70%);
  border-top: 1px solid rgba(0,0,0,.35);
}
.spine[data-template="4"] .spine-label-box {
  background-color: #ece4d1;
  background-image: linear-gradient(180deg, rgba(255,255,255,.5), transparent 40%, rgba(0,0,0,.06)), var(--paper);
  background-size: auto, 240px 240px;
  background-blend-mode: normal, multiply;
  border: 1px solid hsl(var(--hue2, 35) 25% 28%); outline: 1px solid rgba(90,77,59,.35); outline-offset: -3px;
  box-shadow: 0 1px 3px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.25);
  border-radius: 1px;
  padding: 8px 6px;
}
.spine[data-template="4"] .spine-title { color: #1a1612; text-shadow: none; font-weight: 700; letter-spacing: 0; }
.spine[data-template="4"] .spine-author { color: var(--cream); }
.spine[data-template="4"] .spine-ornament { color: var(--cream-dim); opacity: .55; }
.spine[data-template="4"] .spine-year { color: var(--cream-dim); }
.spine[data-template="4"] .spine-mark { color: var(--cream); border-color: rgba(239,232,216,.5); box-shadow: 0 0 0 2px rgba(0,0,0,.15), 0 0 0 3px rgba(239,232,216,.22); }

/* ========================================================================= */
/* TEMPLATE 5: CAPA DURA MODERNA — réguas duplas em ouro, título vertical     */
/* ========================================================================= */
.spine[data-template="5"] .spine-rib.rib-1, .spine[data-template="5"] .spine-rib.rib-4 {
  display: block; height: 5px; width: calc(100% - 2 * var(--pad)); margin: 4px auto;
}
.spine[data-template="5"] .spine-rib.rib-1 { border-top: 2px solid var(--gold-line); border-bottom: 1px solid rgba(222,186,90,.5); }
.spine[data-template="5"] .spine-rib.rib-4 { border-top: 1px solid rgba(222,186,90,.5); border-bottom: 2px solid var(--gold-line); }
.spine[data-template="5"] .comp-1, .spine[data-template="5"] .comp-4 { display: none; }
.spine[data-template="5"] .comp-2 { flex: 1 1 auto; padding: 8px var(--pad); }
.spine[data-template="5"] .comp-3 { flex: 0 0 auto; max-height: 26%; padding: 4px var(--pad); }
.spine[data-template="5"] .comp-5 { flex: 0 0 12%; }
/* pé da lombada na segunda cor, entre as réguas de ouro — véu de matiz:
   o pano e a luz cilíndrica seguem os da lombada inteira */
.spine[data-template="5"] .comp-3::before, .spine[data-template="5"] .comp-5::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c2, var(--c)); mix-blend-mode: color;
}
.spine[data-template="5"] .spine-title { color: var(--cream); font-weight: 600; letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.spine[data-template="5"] .spine-author { color: var(--gold-ink); font-size: 9px; }

/* ========================================================================= */
/* TEMPLATE 6: ANTIQUÁRIO — filetes triplos e florão                          */
/* ========================================================================= */
.spine[data-template="6"] .spine-rib {
  display: block; height: 5px; width: calc(100% - 2 * var(--pad) + 4px); margin: 2px auto;
  border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line);
  background: linear-gradient(180deg, transparent 40%, rgba(222,186,90,.7) 40%, rgba(222,186,90,.7) 60%, transparent 60%);
}
.spine[data-template="6"] .comp-1 { flex: 0 0 7%; }
.spine[data-template="6"] .comp-2 { flex: 0 0 36%; }
.spine[data-template="6"] .comp-3 { flex: 0 0 15%; }
.spine[data-template="6"] .comp-4 { flex: 1 1 auto; }
/* painéis "Cambridge" na segunda cor entre os filetes triplos — couro
   re-tingido por véu de matiz, grão e brilho contínuos */
.spine[data-template="6"] .comp-1::before, .spine[data-template="6"] .comp-4::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c2, var(--c)); mix-blend-mode: color;
}
.spine[data-template="6"] .comp-5 { flex: 0 0 13%; }
.spine[data-template="6"] .spine-title { text-transform: uppercase; letter-spacing: .06em; line-height: 1.2; }
.spine[data-template="6"] .spine-ornament { font-size: 14px; opacity: .9; }
.spine[data-template="6"] .spine-ornament::before { content: "❦"; }
.spine[data-template="6"] .spine-ornament { font-size: 0; }
.spine[data-template="6"] .spine-ornament::before { font-size: 15px; color: var(--gold); text-shadow: 0 1px 1px rgba(0,0,0,.7); }

/* ========================================================================= */
/* ERA MODERNA (7–14) — brochura: sem vinco de couro, cantos retos, sem ouro  */
/* ========================================================================= */
.spine[data-era="modern"] {
  border-radius: 2px 2px 1px 1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.spine[data-era="modern"] .spine-crown { height: 3px; background: linear-gradient(180deg, rgba(255,255,255,.12), transparent); border-top: none; }
.spine[data-era="modern"] .spine-heel  { height: 3px; background: linear-gradient(0deg, rgba(0,0,0,.4), transparent); }

/* ========================================================================= */
/* TEMPLATE 7: PULP ANOS 50 — banca de jornal, condensada, faixa listrada     */
/* ========================================================================= */
[data-template="7"] { --pulp-ink: #16100a; --pulp-yellow: hsl(var(--hue2, 48) 85% 62%); --pulp-cream: #f9ecc4; }
.spine[data-template="7"] .comp-1 {
  flex: 0 0 9%; padding: 0;
  background: repeating-linear-gradient(-45deg, rgba(22,16,10,.85) 0 7px, transparent 7px 14px);
  border-bottom: 2px solid rgba(22,16,10,.85);
}
.spine[data-template="7"] .comp-2 { flex: 1 1 auto; padding: 8px var(--pad); }
.spine[data-template="7"] .comp-3 { flex: 0 0 auto; max-height: 22%; padding: 0; }
.spine[data-template="7"] .comp-4 { flex: 0 0 10%; }
.spine[data-template="7"] .comp-5 { flex: 0 0 11%; }
.spine[data-template="7"] .spine-title {
  font-family: var(--condensed); font-weight: 600; text-transform: uppercase;
  letter-spacing: .03em; color: var(--pulp-cream);
  text-shadow: 1px 1px 0 rgba(22,16,10,.9), 2px 2px 0 rgba(22,16,10,.45);
}
.spine[data-template="7"] .spine-author-box { background: rgba(22,16,10,.85); padding: 4px var(--pad); }
.spine[data-template="7"] .spine-author { color: var(--pulp-yellow); text-shadow: none; letter-spacing: .14em; }
.spine[data-template="7"] .spine-ornament { font-size: 0; }
.spine[data-template="7"] .spine-ornament::before {
  content: "✴"; font-size: 14px; color: var(--pulp-yellow);
  text-shadow: 1px 1px 0 rgba(22,16,10,.8);
}
.spine[data-template="7"] .spine-year { color: var(--pulp-cream); text-shadow: none; }
.spine[data-template="7"] .spine-mark { color: var(--pulp-cream); border-color: rgba(22,16,10,.8); box-shadow: 0 0 0 2px hsl(var(--hue2, 48) 85% 62% / .35); text-shadow: none; }

/* ========================================================================= */
/* TEMPLATE 8: MONÓLITO — quase preto, grotesca leve, uma linha neon          */
/* ========================================================================= */
[data-template="8"] { --neon: hsl(var(--hue2, var(--hue)) 90% 62%); }
.spine[data-template="8"] .comp-1, .spine[data-template="8"] .comp-4 { display: none; }
.spine[data-template="8"] .comp-2 { flex: 1 1 auto; padding: 10px var(--pad); }
.spine[data-template="8"] .spine-rib.rib-2 {
  display: block; height: 1px; width: calc(100% - 2 * var(--pad)); margin: 5px auto;
  background: var(--neon); box-shadow: 0 0 6px var(--neon);
}
.spine[data-template="8"] .comp-3 { flex: 0 0 auto; max-height: 20%; }
.spine[data-template="8"] .comp-5 { flex: 0 0 12%; }
.spine[data-template="8"] .spine-title {
  font-family: var(--sans); font-weight: 300; text-transform: uppercase;
  letter-spacing: .3em; color: #dcdcdc; text-shadow: none;
}
.spine[data-template="8"] .spine-author { color: #8a8a8a; text-shadow: none; letter-spacing: .2em; }
.spine[data-template="8"] .spine-year { color: var(--neon); text-shadow: none; }
.spine[data-template="8"] .spine-mark { color: #8a8a8a; border: 1px solid #3a3a3a; border-radius: 0; box-shadow: none; font-style: normal; text-shadow: none; }

/* ========================================================================= */
/* TEMPLATE 9: BESTSELLER DE AEROPORTO — a tipografia é a capa                */
/* ========================================================================= */
.spine[data-template="9"] .comp-1, .spine[data-template="9"] .comp-4 { display: none; }
.spine[data-template="9"] .comp-2 { flex: 1 1 auto; padding: 6px calc(var(--pad) * .6); }
.spine[data-template="9"] .comp-3 { flex: 0 0 auto; max-height: 18%; }
.spine[data-template="9"] .comp-5 { flex: 0 0 12%; }
/* tarja impressa: tinta sobre o papel — multiply deixa o grão e a luz passarem */
.spine[data-template="9"] .comp-5::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c2, rgba(0,0,0,.82)); mix-blend-mode: multiply;
}
.spine[data-template="9"] .spine-title {
  font-family: var(--sans); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.01em; line-height: .95; color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.spine[data-template="9"] .spine-author { font-family: var(--sans); font-weight: 700; font-size: 9px; color: rgba(255,255,255,.92); text-shadow: none; letter-spacing: .1em; }
.spine[data-template="9"] .spine-year { color: #fff; text-shadow: none; }
.spine[data-template="9"] .spine-mark { color: #fff; border-color: rgba(255,255,255,.7); box-shadow: none; text-shadow: none; }

/* ========================================================================= */
/* TEMPLATE 10: SUÍÇO EDITORIAL — off-white, grid, faixa na cor da estante    */
/* ========================================================================= */
[data-template="10"] { --swiss-band2: hsl(var(--hue2, var(--hue)) 58% 40%); }
.spine[data-template="10"] { --swiss-ink: #16150f; --swiss-band: hsl(var(--hue) 60% 44%); }
/* a segunda tinta da impressão: a régua do topo (tinta encharca o papel) */
.spine[data-template="10"] .spine-rib.rib-1 {
  display: block; height: 2px; width: calc(100% - 2 * var(--pad)); margin: 2px auto 0;
  background: var(--swiss-band2, var(--swiss-ink)); mix-blend-mode: multiply;
}
.spine[data-template="10"] .comp-1 { flex: 0 0 4%; }
.spine[data-template="10"] .comp-2 { flex: 1 1 auto; padding: 8px var(--pad); }
.spine[data-template="10"] .spine-label-box { place-items: start center; }
.spine[data-template="10"] .comp-3 { flex: 0 0 auto; max-height: 20%; padding: 5px var(--pad); }
/* faixa impressa na cor da estante: tinta multiply, o off-white vira papel sob a cor */
.spine[data-template="10"] .comp-3::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--swiss-band); mix-blend-mode: multiply;
}
.spine[data-template="10"] .comp-4 { flex: 0 0 8%; }
.spine[data-template="10"] .comp-5 { flex: 0 0 12%; }
.spine[data-template="10"] .spine-title {
  font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; line-height: 1.1;
  text-align: start; color: var(--swiss-ink); text-shadow: none;
}
.spine[data-template="10"] .spine-author { font-family: var(--sans); font-weight: 600; color: #fdfbf4; text-shadow: none; }
.spine[data-template="10"] .spine-ornament { display: none; }
.spine[data-template="10"] .spine-year { color: #6b675c; text-shadow: none; }
.spine[data-template="10"] .spine-mark { color: var(--swiss-ink); border-color: var(--swiss-ink); border-radius: 0; box-shadow: none; text-shadow: none; }

/* ========================================================================= */
/* TEMPLATE 11: TRI-FAIXA PENGUIN — cor / creme / cor, título na faixa creme  */
/* ========================================================================= */
.spine[data-template="11"] { --pg-cream: #efe6cd; --pg-ink: #23211c; }
.spine[data-template="11"] .comp-1 { flex: 0 0 8%; }
/* display:block: com grid + linha auto, o height:100% do label-box colapsaria para o conteúdo */
.spine[data-template="11"] .comp-2 { flex: 0 0 46%; padding: 0; display: block; }
.spine[data-template="11"] .spine-label-box {
  background: var(--pg-cream); padding: 8px var(--pad);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.25);
}
.spine[data-template="11"] .comp-3 { flex: 0 0 16%; }
.spine[data-template="11"] .comp-4 { flex: 1 1 auto; }
.spine[data-template="11"] .comp-5 { flex: 0 0 13%; }
/* tri-faixa em duas cores: topo na cor da capa, base na segunda — véu de
   matiz sobre o mesmo papel, mesma luz nas duas faixas */
.spine[data-template="11"] .comp-3::before, .spine[data-template="11"] .comp-4::before, .spine[data-template="11"] .comp-5::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--c2, var(--c)); mix-blend-mode: color;
}
.spine[data-template="11"] .spine-title { font-family: var(--sans); font-weight: 600; letter-spacing: .01em; color: var(--pg-ink); text-shadow: none; }
.spine[data-template="11"] .spine-author { font-family: var(--sans); font-weight: 500; color: #fdf8ea; text-shadow: none; letter-spacing: .14em; }
.spine[data-template="11"] .spine-ornament { font-size: 0; }
.spine[data-template="11"] .spine-ornament::before {
  content: ""; display: block; width: 15px; height: 21px;
  border: 1.5px solid var(--pg-cream); border-radius: 50%; opacity: .9;
}
.spine[data-template="11"] .spine-year { color: var(--pg-cream); text-shadow: none; }
.spine[data-template="11"] .spine-mark { color: var(--pg-cream); border-color: var(--pg-cream); box-shadow: none; text-shadow: none; }

/* ========================================================================= */
/* TEMPLATE 12: FITZCARRALDO — uma cor profunda, serifa itálica branca        */
/* ========================================================================= */
.spine[data-template="12"] { --fitz-paper: #fdfcf7; }
.spine[data-template="12"] .comp-1, .spine[data-template="12"] .comp-4 { display: none; }
.spine[data-template="12"] .comp-2 { flex: 1 1 auto; padding: 10px var(--pad); }
.spine[data-template="12"] .comp-3 { flex: 0 0 auto; max-height: 20%; }
.spine[data-template="12"] .comp-5 { flex: 0 0 11%; }
.spine[data-template="12"] .spine-title {
  font-family: var(--display); font-weight: 400; font-style: italic;
  letter-spacing: .02em; text-transform: none; color: var(--fitz-paper); text-shadow: none;
}
.spine[data-template="12"] .spine-author {
  font-family: var(--display); font-style: italic; text-transform: none;
  font-size: 10px; letter-spacing: .04em; color: rgba(253,252,247,.85); text-shadow: none;
}
/* a segunda cor entra sussurrada — a contenção É a identidade do template */
.spine[data-template="12"] .spine-year { color: hsl(var(--hue2, var(--hue)) 45% 80% / .8); text-shadow: none; }
.spine[data-template="12"] .spine-mark { border: none; box-shadow: none; color: hsl(var(--hue2, var(--hue)) 45% 82% / .85); font-size: 9px; text-shadow: none; }

/* ========================================================================= */
/* TEMPLATE 13: TERMINAL — mono, prompt $, ano como versão, cursor piscando   */
/* ========================================================================= */
[data-template="13"] { --term-green: hsl(var(--hue2, 150) 62% 55%); --term-dim: hsl(var(--hue2, 150) 30% 21%); --term-ink: #cdd9d0; }
.spine[data-template="13"] .comp-1 { display: none; }
.spine[data-template="13"] .comp-2 { flex: 1 1 auto; padding: 8px var(--pad); }
.spine[data-template="13"] .spine-rib.rib-2 {
  display: block; height: 0; width: calc(100% - 2 * var(--pad)); margin: 4px auto;
  border-top: 1px dashed var(--term-dim);
}
.spine[data-template="13"] .comp-3 { flex: 0 0 auto; max-height: 20%; }
.spine[data-template="13"] .comp-4 { flex: 0 0 10%; }
.spine[data-template="13"] .comp-5 { flex: 0 0 12%; }
.spine[data-template="13"] .spine-title {
  font-family: var(--mono); font-weight: 500; letter-spacing: .04em;
  color: var(--term-ink); text-shadow: 0 0 6px hsl(var(--hue2, 150) 62% 55% / .25);
}
.spine[data-template="13"] .spine-title::before { content: "$ "; color: var(--term-green); }
.spine[data-template="13"] .spine-author { color: var(--term-green); text-shadow: none; }
.spine[data-template="13"] .spine-ornament { font-size: 0; }
.spine[data-template="13"] .spine-ornament::before {
  content: "▮"; font-size: 11px; color: var(--term-green);
  animation: ul-blink 1.2s steps(2, jump-none) infinite;
}
.spine[data-template="13"] .spine-year { color: var(--term-green); text-shadow: none; }
.spine[data-template="13"] .spine-year::before { content: "v"; }
.spine[data-template="13"] .spine-mark {
  font-family: var(--mono); font-style: normal; color: var(--term-green);
  border-radius: 2px; border-color: var(--term-dim); box-shadow: none; text-shadow: none;
}
@keyframes ul-blink { 50% { opacity: 0; } }

/* ========================================================================= */
/* TEMPLATE 14: VAPORWAVE — gradiente diagonal, serifa fina, sol de neon      */
/* ========================================================================= */
.spine[data-template="14"] {
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.05) 52%, transparent 62%),
    var(--sheen),
    linear-gradient(165deg, hsl(var(--hue2, calc(var(--hue) - 45)) 75% 58%), hsl(var(--hue) 65% 45%) 48%, hsl(calc(var(--hue2, var(--hue)) + 40) 80% 62%));
  background-blend-mode: screen, normal, normal, normal;
}
.spine[data-template="14"] .comp-1 { display: none; }
.spine[data-template="14"] .comp-2 { flex: 1 1 auto; padding: 10px var(--pad); }
.spine[data-template="14"] .comp-3 { flex: 0 0 auto; max-height: 20%; }
.spine[data-template="14"] .comp-4 { flex: 0 0 12%; }
.spine[data-template="14"] .comp-5 { flex: 0 0 12%; }
.spine[data-template="14"] .spine-title {
  font-family: var(--display); font-weight: 300; text-transform: uppercase;
  letter-spacing: .14em; color: #fff; text-shadow: 0 0 10px rgba(255,255,255,.5);
}
.spine[data-template="14"] .spine-author { color: rgba(255,255,255,.85); text-shadow: none; letter-spacing: .18em; }
.spine[data-template="14"] .spine-ornament { font-size: 0; }
.spine[data-template="14"] .spine-ornament::before {
  content: ""; display: block; width: 15px; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(180deg, #ffe3a3, #ff6ea9 70%, #b86bff);
  box-shadow: 0 0 10px rgba(255,150,190,.55);
}
.spine[data-template="14"] .spine-year { color: rgba(255,255,255,.8); text-shadow: none; }
.spine[data-template="14"] .spine-mark { color: #fff; border-color: rgba(255,255,255,.75); box-shadow: 0 0 8px rgba(255,255,255,.35); text-shadow: none; }

/* Templates de título vertical: o título nasce vertical (só o 11 lê deitado) */
.spine[data-template="3"] .spine-title, .spine[data-template="5"] .spine-title,
.spine[data-template="7"] .spine-title, .spine[data-template="8"] .spine-title,
.spine[data-template="9"] .spine-title, .spine[data-template="10"] .spine-title,
.spine[data-template="12"] .spine-title, .spine[data-template="13"] .spine-title,
.spine[data-template="14"] .spine-title {
  writing-mode: vertical-rl; width: auto; max-width: 100%; height: auto; max-height: 100%;
  font-size: var(--fs-v);
}
/* aeroporto: o título ocupa a lombada — parte maior, o fitter encolhe se preciso */
.spine[data-template="9"] .spine-title { font-size: calc(var(--fs-v) * 1.5); }

@media (prefers-reduced-motion: reduce) {
  .spine[data-template="13"] .spine-ornament::before { animation: none; }
}