/* Deel 7 (Aanleer 1b): a rinsed sky after the storm for the title, stories with intent, Jonah and Noah,
   children's crayon drawings, and the colours of its drawings. Loaded after story.css. */

/* ---------- title: the sky after rain ---------- */
.hero.sea7 { color: var(--ink); background: linear-gradient(180deg, #8FB3CF 0%, #B9D0DF 36%, #E3E6DE 70%, var(--paper) 100%); }
.hero.sea7 .eyebrow { color: #2F5E86; }
.hero.sea7 h1 em { color: #B2382C; }
.hero.sea7 .sub, .hero.sea7 .byline { color: var(--ink-2); }
.hero.sea7 .byline b { color: var(--ink); }
.hero.sea7 #hero-art { filter: drop-shadow(0 26px 40px rgba(30, 60, 90, .2)); }
.hero.sea7 .cue { color: #4A6680; }
body:has(.hero.sea7)::before { background: #8FB3CF; }
body:has(.hero.sea7) #topbar:not(.solid) { color: var(--ink); }

/* ---------- drawings ---------- */
.w-sky7 { fill: #CFE0EC; } .w-deep7 { fill: #4F86AE; } .w-fish7 { fill: #8DB9A4; } .w-belly7 { fill: #D9E8C8; }
.w-ark7 { fill: #9C6B3E; } .w-ark7l { fill: #C29466; } .w-roof7 { fill: #7A4E2C; } .w-giraffe7 { fill: #E3B54A; } .w-leaf7 { fill: #7FA855; }
.w-rb1 { fill: #D9473A; } .w-rb2 { fill: #EE8A3A; } .w-rb3 { fill: #F2CF4A; } .w-rb4 { fill: #7FB060; } .w-rb5 { fill: #4F86C0; } .w-rb6 { fill: #7A5AA6; }
.w-page7 { fill: #F5ECD6; } .w-skin7 { fill: #E9B98E; } .w-skin7d { fill: #8A5A3C; } .w-hair7 { fill: #5A3E2B; } .w-beard7 { fill: #8C8C8C; }
.w-robe7a { fill: #6E8FAE; } .w-robe7b { fill: #B8875A; } .w-robe7c { fill: #7F9A62; } .w-robe7d { fill: #A8665A; } .w-robe7j { fill: #F1EBDD; } .w-robe7f { fill: #8C6440; }
.w-robe7p { fill: #3F5A7A; } .w-robe7p2 { fill: #4E6E5A; } .w-cap7 { fill: #2E3A4E; } .w-rags7 { fill: #A99A80; } .w-purple7 { fill: #6B3E7A; }
.w-lid7 { fill: #E7DCC4; } .w-hole7 { fill: #F8F6EF; } .w-piece7 { fill: #F6E7B8; } .w-ocean7 { fill: #4F8FC0; } .w-land7 { fill: #D9B866; } .w-shirt7 { fill: #3F6C9E; } .w-card7 { fill: #FBF7EC; }
.w-gold7 { fill: #E8C766; } .w-heart7 { fill: #D2453A; } .w-cover7 { fill: #6E2E26; } .w-fire7 { fill: #F0A040; } .w-clay7 { fill: #C9A57A; }
.w-lens7 { fill: #DCEAF2; } .w-wool7 { fill: #F4F0E6; } .w-glow7 { fill: #FFF1B8; } .w-wood7 { fill: #B98B5A; } .w-bread7 { fill: #D9A860; } .w-wine7 { fill: #8E2E3A; }
.w-dusk7 { fill: #F2C99A; } .w-sun7 { fill: #F6C453; } .w-field7 { fill: #A9B97A; } .w-path7 { fill: #E5D3A8; } .w-house7 { fill: #E3D2B0; }
.w-purse7 { fill: #9A5B34; } .w-stone7 { fill: #B7AFA2; } .w-dog7 { fill: #B08A62; } .w-tag7 { fill: #FBF6EA; } .w-note7 { fill: #B9D3A6; }
.w-persian7 { fill: #D9C3E6; } .w-sp7a { fill: #3F6C9E; } .w-sp7b { fill: #8E3A2E; } .w-sp7c { fill: #5E7F4A; } .w-sp7d { fill: #2E6A7A; }
.w-city7 { fill: #D8C3A0; } .w-cow7 { fill: #EDE6DA; } .w-sack7 { fill: #9C8462; } .w-meadow7 { fill: #D4E3B4; }
.w-heat7 { fill: #F7E2AE; } .w-sand7 { fill: #E8D3A0; } .w-leafa7 { fill: #7FA855; } .w-leafb7 { fill: #5E8A42; } .w-dead7 { fill: #B39A6A; }
.w-storm7 { fill: #6E7A8C; } .w-tear7 { fill: #9CC3E6; } .w-night7 { fill: #1E2A3C; } .w-coat7 { fill: #2B2B30; } .w-waist7 { fill: #E8E2D2; }
.w-lion7 { fill: #D9A860; } .w-mane7 { fill: #A8662E; } .w-sheet7 { fill: #FFFFFF; }
.st.marker7 { stroke: #F2CF4A; opacity: .8; } .st.iron7 { stroke: #3A3F48; } .st.bark7 { stroke: #7A5636; } .st.worm7 { stroke: #C77A8A; }
.st.jline7 { stroke: #B2382C; } .st.pline7 { stroke: #3F6C9E; } .st.leaf { stroke: #4F7A3E; } .st.sky-s { stroke: #3F6C9E; }
.st.crayon7 { stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.st.c-red7 { stroke: #D9473A; } .st.c-orange7 { stroke: #EE8A3A; } .st.c-yellow7 { stroke: #F2C230; } .st.c-green7 { stroke: #6DAA4E; } .st.c-blue7 { stroke: #4F86C0; }
.st.c-purple7 { stroke: #7A5AA6; } .st.c-brown7 { stroke: #8C5A34; } .st.c-grey7 { stroke: #8A8F96; } .st.c-black7 { stroke: #333; }
svg .kid7 { font-family: "Patrick Hand", var(--hand); fill: #3A3F4A; }
svg .cream7, svg .fell.cream7 { fill: #FBF3DC; } svg .gold-t7, svg .fell.gold-t7 { fill: #E8C766; }
svg .fell.brass-t { fill: var(--brass); } svg .fell.sky-t { fill: #2F5E86; } svg .fell.muted { fill: var(--muted); } svg .fell.red-t { fill: var(--red); }
svg .sky-t { fill: #2F5E86; } svg .leaf-t { fill: #4F7A3E; } svg .red-t { fill: var(--red); } svg .j-t7, svg .fell.j-t7 { fill: #B2382C; } svg .p-t7, svg .fell.p-t7 { fill: #3F6C9E; }
svg .hebrew { font-family: "Noto Serif Hebrew", serif; fill: var(--ink); }
svg .lab7 { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }

/* gentle motion in the title */
.bob7 { animation: bob7 4.2s ease-in-out infinite; transform-box: view-box; transform-origin: 300px 340px; }
@keyframes bob7 { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(3px) rotate(-1deg); } }
.swim7 { animation: swim7 7s ease-in-out infinite; }
@keyframes swim7 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10px); } }
.fly7 { animation: fly7 3.6s ease-in-out infinite; }
@keyframes fly7 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -5px); } }
@media (prefers-reduced-motion: reduce) { .bob7, .swim7, .fly7 { animation: none; } }

/* ---------- text pieces ---------- */
ul.trio7, ul.four7 { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; }
ul.trio7 li, ul.four7 li { padding: 10px 14px; border-radius: 10px; background: var(--card); border: 1px solid rgba(29, 36, 48, .1); color: var(--ink-2); line-height: 1.4; }
ul.trio7 b { font-family: var(--display); font-weight: 500; font-size: 1.12em; color: var(--ink); }
ul.four7 { grid-template-columns: 1fr 1fr; }
ul.four7 li { font-family: var(--display); font-size: 1.02em; color: var(--ink); }
blockquote.verse.en p { font-size: 1.08em; line-height: 1.45; }
blockquote.verse.latin7 p { font-style: italic; }
.step p.gloss { font-family: var(--hand); font-size: 1.02em; line-height: 1.45; color: var(--muted); padding-left: 20px; margin-top: -4px; }
.step p.gloss::before { content: "Afrikaans: "; font-weight: 700; color: var(--brass); }
table.jp7 { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 0 1em; background: var(--card); border: 1px solid rgba(29, 36, 48, .12); border-radius: 12px; overflow: hidden; font-size: .92em; line-height: 1.35; }
table.jp7 th, table.jp7 td { padding: 9px 12px; text-align: left; vertical-align: top; border-top: 1px solid rgba(29, 36, 48, .08); }
table.jp7 thead th { border-top: 0; font-family: var(--display); font-size: 1.4em; font-weight: 500; }
table.jp7 thead th:nth-child(2) { color: #B2382C; } table.jp7 thead th:nth-child(3) { color: #3F6C9E; }
table.jp7 tbody th { font-family: var(--display); font-weight: 500; color: var(--ink); white-space: nowrap; }
table.jp7 td { color: var(--ink-2); }
@media screen and (max-width: 520px) { ul.four7 { grid-template-columns: 1fr; } table.jp7 { font-size: .84em; } table.jp7 th, table.jp7 td { padding: 7px 8px; } }

/* ---------- the booklet ---------- */
@media print {
  .hero.sea7 #hero-art { filter: none; }
  .light .hero.sea7 { background: #fff; }
  .light .hero.sea7 .eyebrow { color: var(--brass); }
  ul.trio7, ul.four7 { gap: 1.5mm; break-inside: avoid; } ul.trio7 li, ul.four7 li { padding: 1.6mm 3mm; font-size: 9.5pt; break-inside: avoid; }
  blockquote.verse.en p { font-size: 10pt; }
  .step p.gloss { font-size: 9.5pt; }
  table.jp7 { font-size: 8.5pt; break-inside: avoid; } table.jp7 th, table.jp7 td { padding: 1.4mm 2.4mm; }
  .bob7, .swim7, .fly7 { animation: none; }
}