/* Deel 5 (Afleer 2): a lapis-and-gold title like an icon, the comparison table, the pairs of
   contradictions, the reactions to tap, and the colours of its drawings. Loaded after story.css. */

/* ---------- title: lapis blue and gold ---------- */
.hero.lapis { background: linear-gradient(180deg, #111C36 0%, #1C2D57 44%, #34406A 68%, #8E7A60 88%, var(--paper) 100%); }
.hero.lapis .eyebrow { color: #E0BC6A; }
.hero.lapis h1 em { color: #F0CC74; }
.hero.lapis #hero-art { filter: drop-shadow(0 30px 60px rgba(4, 8, 20, .55)); }
body:has(.hero.lapis)::before { background: #111C36; }
.on-lapis .st.gold { stroke: #E2B85C; }
.on-lapis .st.parch { stroke: #EADFC2; }
.on-lapis .st.pencil { stroke: #9C8E70; }
.on-lapis .w-page { fill: #F3E6C4; }
.mote { fill: #FFF1C4; animation: mote 6s ease-in-out infinite; }
@keyframes mote { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-60px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mote { animation: none; } }

/* ---------- drawings ---------- */
.st.gold { stroke: #B88A2E; } .st.parch { stroke: #6B5A44; }
.w-gold-l { fill: #F6DC8E; } .w-cross { fill: #FFF4D6; } .w-lect { fill: #6A4528; } .w-page { fill: #F7EDD3; } .w-cover { fill: #7A3528; }
.w-koran { fill: #2E6A4E; } .w-torah { fill: #EEDFB8; } .w-arm { fill: #C9C6BE; } .w-sleeve { fill: #A9805A; } .w-wood-l { fill: #CDA77C; }
.w-ot { fill: #4F86BF; } .w-deut { fill: #9C6B3E; } .w-orth { fill: #E3B54A; } .w-nt { fill: #A8432F; }
.w-cath { fill: #87352A; } .w-prot { fill: #C25A3C; } .w-ortho { fill: #E7A970; } .w-other { fill: #EAD7A6; }
.w-shade { fill: #3A3A44; } .w-sky { fill: #A9D0EA; } .w-blue { fill: #3F6C9E; } .w-blue-l { fill: #B6C9DE; } .w-cloud { fill: #9AA3AE; }
.w-donkey { fill: #A79A8C; } .w-tent { fill: #D1AE78; } .w-cardred { fill: #C8443A; }
.veil { fill: #D9D0EC; opacity: .72; stroke: #9C8FC0; stroke-width: 1.2; stroke-dasharray: 4 5; }
.slip { fill: #FBF7EC; stroke: #6B5A44; stroke-width: 1.4; }
svg .lab-w { fill: #FBF6EA; }
svg .fell.brass-t { fill: var(--brass); }
svg .arabic { font-family: "Noto Naskh Arabic", "Geeza Pro", "Times New Roman", serif; fill: var(--ink); }
svg .tagline { paint-order: stroke; stroke: var(--card); stroke-width: 6px; stroke-linejoin: round; }

/* ---------- Torah, Koran and Bible, side by side ---------- */
.compare-wrap { margin: 4px 0 0; }
table.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; line-height: 1.4; background: var(--card); border: 1px solid rgba(29, 36, 48, .1); border-radius: 12px; overflow: hidden; }
table.compare caption { caption-side: top; text-align: left; font-family: var(--body); font-style: italic; font-size: 14px; color: var(--muted); padding: 0 2px 10px; line-height: 1.35; }
table.compare th, table.compare td { padding: 9px 10px; vertical-align: top; text-align: left; border-bottom: 1px solid rgba(29, 36, 48, .08); }
table.compare tr:last-child > * { border-bottom: 0; }
table.compare thead th { font-family: var(--display); font-weight: 500; font-size: 19px; color: #fff; line-height: 1.15; }
table.compare thead th small { display: block; font-family: var(--body); font-size: 11.5px; font-weight: 400; opacity: .9; margin-top: 3px; }
table.compare thead th:first-child { color: var(--ink); background: #E7E3D8; }
.c-torah { background: #1F4E8C; } .c-koran { background: #2E6A4E; } .c-bybel { background: #8C2F2B; }
table.compare tbody th { font-weight: 600; font-size: 14px; color: var(--ink); background: #EFEBE0; width: 22%; }
table.compare tbody td:nth-child(2) { background: rgba(31, 78, 140, .06); }
table.compare tbody td:nth-child(3) { background: rgba(46, 106, 78, .06); }
table.compare tbody td:nth-child(4) { background: rgba(140, 47, 43, .07); color: var(--ink); }
.step table.compare td { color: var(--ink-2); }

/* ---------- pairs of contradictions ---------- */
ul.pairs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
ul.pairs li { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(29, 36, 48, .1); background: var(--card); }
ul.pairs span { padding: 12px 14px; font-size: 16px; line-height: 1.4; color: var(--ink); }
ul.pairs span + span { border-left: 2px dashed rgba(178, 56, 44, .5); }
ul.pairs cite { display: block; font-style: normal; font-family: var(--hand); font-size: 14px; color: var(--muted); margin-top: 2px; }

/* ---------- reactions to tap ---------- */
.feel { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.feel button { font: 500 16px/1.25 var(--body); color: var(--ink); background: var(--card); border: 1.5px solid rgba(29, 36, 48, .18); border-radius: 999px; padding: 9px 15px; cursor: pointer; transition: background .15s, border-color .15s; text-align: left; }
.feel button:hover { border-color: var(--brass); }
.feel button[aria-pressed="true"] { background: #F1E2B8; border-color: var(--brass); }
.feel button[aria-pressed="true"]::before { content: "✓ "; color: var(--brass); font-weight: 700; }

/* ---------- phone ---------- */
@media screen and (max-width: 880px) {
  table.compare, table.compare tbody, table.compare tr, table.compare td, table.compare tbody th { display: block; width: auto; }
  table.compare { border: 0; background: transparent; }
  table.compare caption { display: block; padding: 0 0 12px; }
  table.compare thead { display: none; }
  table.compare tbody tr { margin: 0 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid rgba(29, 36, 48, .1); background: var(--card); }
  table.compare tbody th { font-size: 15px; }
  table.compare td { display: grid; grid-template-columns: 62px 1fr; gap: 8px; }
  table.compare td::before { content: attr(data-l); font-family: var(--display); font-size: 15px; font-weight: 500; }
  table.compare td:nth-child(2)::before { color: #1F4E8C; } table.compare td:nth-child(3)::before { color: #2E6A4E; } table.compare td:nth-child(4)::before { color: #8C2F2B; }
  ul.pairs span { font-size: 15px; padding: 10px 12px; }
}

/* ---------- the booklet ---------- */
@media print {
  .hero.lapis #hero-art { filter: none; }
  table.compare { font-size: 7.6pt; break-inside: avoid; }
  table.compare caption { font-size: 8pt; padding-bottom: 2mm; }
  table.compare th, table.compare td { padding: 1.4mm 1.8mm; }
  table.compare thead th { font-size: 10pt; } table.compare thead th small { font-size: 6.5pt; }
  table.compare tbody th { font-size: 7.6pt; }
  ul.pairs { gap: 2mm; } ul.pairs li { break-inside: avoid; } ul.pairs span { font-size: 9pt; padding: 2mm 3mm; } ul.pairs cite { font-size: 8pt; }
  .feel { display: block; margin: 0 0 3mm; }
  .feel button { display: block; border: 0; background: none; padding: 0.6mm 0; font-size: 10pt; }
  .feel button::before, .feel button[aria-pressed="true"]::before { content: "☐ "; color: var(--ink); font-weight: 400; }
  .light .hero.lapis { background: #fff; }
  .light .on-lapis .st.parch { stroke: #6B5A44; } .light .on-lapis .st.pencil { stroke: #8F8B7F; }
}
@media print { .light .hero.lapis .eyebrow, .light .hero.lapis h1 em { color: var(--brass); } }