/* Deel 6 (Aanleer 1a): a clear morning sky for the climb, the three contact points, the kinds of
   texts, English quotations with their Afrikaans gloss, and the colours of its drawings. Loaded after story.css. */

/* ---------- title: a morning sky ---------- */
.hero.sky { color: var(--ink); background: linear-gradient(180deg, #9CC3DE 0%, #C3DBEA 38%, #E6EBE4 72%, var(--paper) 100%); }
.hero.sky .eyebrow { color: #2F5E86; }
.hero.sky h1 em { color: #B2382C; }
.hero.sky .sub, .hero.sky .byline { color: var(--ink-2); }
.hero.sky .byline b { color: var(--ink); }
.hero.sky #hero-art { filter: drop-shadow(0 26px 40px rgba(40, 70, 100, .18)); }
.hero.sky .cue { color: #4A6680; }
body:has(.hero.sky)::before { background: #9CC3DE; }
body:has(.hero.sky) #topbar:not(.solid) { color: var(--ink); }

/* ---------- drawings ---------- */
.st.sky-s { stroke: #3F6C9E; } .st.leaf { stroke: #4F7A3E; } .st.wind { stroke: #7FA2BF; }
.w-ladder { fill: #D6A86A; } .w-shirt { fill: #3F6C9E; } .w-pants { fill: #4A4E5C; } .w-skin6 { fill: #E9B98E; }
.w-page6 { fill: #F5ECD6; } .w-ocean { fill: #4F8FC0; } .w-land { fill: #D9B866; } .w-land2 { fill: #86A85A; }
.w-case { fill: #9A5B34; } .w-lens { fill: #DCEAF2; } .w-cover6 { fill: #7A3528; }
.w-sp1 { fill: #B2382C; } .w-sp2 { fill: #3F6C9E; } .w-sp3 { fill: #5E7F4A; } .w-sp4 { fill: #A9782A; } .w-sp5 { fill: #6B4E7A; }
.w-sp6 { fill: #2E4A5E; } .w-sp7 { fill: #8C6440; } .w-sp8 { fill: #C25A3C; } .w-sp9 { fill: #8E3A2E; } .w-shelf { fill: #B98B5A; }
.w-steel { fill: #AEB4BC; } .w-handle { fill: #C8443A; } .w-handle2 { fill: #E3B54A; }
.w-old { fill: #E8D9B0; } .w-stamp { fill: #F4D9D2; } .w-beast { fill: #9C8BB0; }
.w-fire { fill: #F0A040; } .w-fire2 { fill: #F7D36A; } .w-night6 { fill: #22304A; } .w-robe1 { fill: #8E5A3A; } .w-robe2 { fill: #5E7F4A; } .w-robe3 { fill: #6B4E7A; } .w-robe4 { fill: #C9973E; }
.w-tent { fill: #D1AE78; } .w-box { fill: #D2A872; } .w-box-d { fill: #B88A55; } .w-glow6 { fill: #FFF1B8; } .w-tag { fill: #FBF6EA; }
.w-machine { fill: #3A3F48; } .w-machine-l { fill: #5A606B; } .w-paper6 { fill: #FBF8F0; } .w-key { fill: #E9E3D3; }
.w-check { fill: #FBF8F0; } .w-hood { fill: #C8302A; } .w-basket { fill: #B98B5A; } .w-wolf { fill: #7D7F86; } .w-trunk { fill: #7A5636; } .w-tree { fill: #6E9A52; } .w-tree2 { fill: #4F7A3E; } .w-path { fill: #E5D3A8; }
.w-grass { fill: #A9C27A; } .w-pan { fill: #C9973E; } .w-gran { fill: #9CA7B8; } .w-child { fill: #E3B54A; }
.w-plane { fill: #DDE3EA; } .w-pill { fill: #E46A52; } .w-pill2 { fill: #F3EEDF; } .w-gear { fill: #AEB4BC; } .w-heart { fill: #D2453A; } .w-moon6 { fill: #F4E7B8; } .w-night-l { fill: #2E3E5E; }
.w-fish { fill: #6E93A8; } .w-ark { fill: #9C6B3E; } .w-rain { fill: #B6C9DE; } .w-seed { fill: #8C6440; } .w-apple { fill: #C8443A; } .w-snake { fill: #6E9A52; }
svg .typed { font-family: "Special Elite", "Courier New", monospace; fill: #2B2B2B; }
svg .lab6 { paint-order: stroke; stroke: var(--paper); stroke-width: 6px; stroke-linejoin: round; }
svg .chalk-y, svg .fell.chalk-y { fill: #F6D46B; } svg .fell.brass-t { fill: var(--brass); } svg .fell.sky-t { fill: #2F5E86; } svg .fell.muted { fill: var(--muted); } .st.chalk-y { stroke: #F6D46B; } svg .sky-t { fill: #2F5E86; } svg .leaf-t { fill: #4F7A3E; } svg .red-t { fill: var(--red); }
.flick6 { animation: flick6 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flick6 { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.94, 1.06); } 70% { transform: scale(1.04, .95); } }
.sway { animation: sway 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes sway { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-7deg); } }
.wobble { transition: transform .4s; }
@media (prefers-reduced-motion: reduce) { .flick6, .sway { animation: none; } }

/* ---------- text pieces ---------- */
ul.trio { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 8px; }
ul.trio 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.trio b { display: block; font-family: var(--display); font-weight: 500; font-size: 1.15em; color: var(--ink); }
ul.kinds { list-style: none; margin: 0 0 1em; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
ul.kinds li { padding: 5px 12px; border-radius: 999px; background: var(--card); border: 1px solid rgba(29, 36, 48, .14); font-size: 15px; color: var(--ink); }
blockquote.verse.en p { font-size: 1.08em; line-height: 1.45; }
.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); }

/* ---------- the booklet ---------- */
@media print {
  .hero.sky #hero-art { filter: none; }
  .light .hero.sky { background: #fff; }
  .light .hero.sky .eyebrow { color: var(--brass); }
  ul.trio { gap: 1.5mm; break-inside: avoid; } ul.trio li { padding: 1.6mm 3mm; font-size: 9.5pt; break-inside: avoid; }
  ul.kinds li { font-size: 8.5pt; padding: .8mm 2.5mm; }
  blockquote.verse.en p { font-size: 10pt; }
  .step p.gloss { font-size: 9.5pt; }
}
.st.beast { stroke: #8A78A8; } .st.pants { stroke: #4A4E5C; } .st.sleeve { stroke: #3F6C9E; } .w-hair { fill: #5A3E2B; }
svg .badge-t { font-family: var(--display); font-weight: 500; fill: #FBF6EA; }
.step p.aside6 { font-family: var(--hand); font-size: 1.02em; line-height: 1.45; color: var(--muted); }