/* /africa — the Africa book page (behind the QR code in the book): presentation + reader activities */

/* inside the book */
.gestures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 30px; counter-reset: g; }
@media (max-width: 860px) { .gestures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gestures li { counter-increment: g; border-top: 2px solid var(--ink); padding-top: 14px; display: grid; gap: 6px; }
.gestures b { font: 800 19px/1.2 var(--f-body); text-transform: uppercase; color: var(--navy); }
.gestures b::before { content: counter(g) " · "; color: var(--orange-d); }
.gestures li > span { font: 300 15px/1.5 var(--f-body); }
.specs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 34px; padding: 22px; background: var(--cream); }
@media (max-width: 640px) { .specs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.specs-row li { display: grid; gap: 2px; }
.specs-row b { font: 800 clamp(22px, 2.4vw, 30px)/1 var(--f-body); color: var(--navy); }
.specs-row li > span { font: 400 13px/1.35 var(--f-body); color: var(--ink-soft); }

/* reader welcome */
.welcome { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: clamp(18px, 4vw, 40px); align-items: center; }
.welcome .stamp { width: 100%; rotate: -8deg; }
@media (max-width: 640px) { .welcome { grid-template-columns: minmax(0, 1fr); } .welcome .stamp { width: 110px; } }
.welcome .h2 { margin-top: 8px; }

/* map + country card */
.map-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 34px; align-items: start; }
@media (max-width: 900px) { .map-layout { grid-template-columns: minmax(0, 1fr); } }
.map { position: relative; width: 100%; aspect-ratio: 860 / 750; }
.map svg { display: block; width: 100%; height: 100%; overflow: visible; }
.map-loading { position: absolute; inset: 0; display: grid; place-items: center; }
.map .c { fill: #fff; stroke: var(--ink); stroke-width: 0.9; stroke-linejoin: round; cursor: pointer; transition: fill 0.15s; }
.map .c:hover, .map .c:focus-visible { fill: #fff3e9; outline: none; }
.map .c.done { fill: url(#crayon); }
.map .c.sel { stroke: var(--orange-d); stroke-width: 2.4; }
.map .neutral { fill: #f1f0ee; stroke: #b9b5ae; stroke-width: 0.7; stroke-dasharray: 2 2; }
.map .isle { fill: transparent; stroke: var(--ink); stroke-width: 1.2; stroke-dasharray: 2 3; cursor: pointer; }
.map .isle:hover, .map .isle:focus-visible { stroke: var(--orange-d); outline: none; }
.map .isle.done { fill: rgba(250, 103, 30, 0.22); }
.map .isle.sel { stroke: var(--orange-d); stroke-width: 2.4; stroke-dasharray: none; }
.map .tip { pointer-events: none; font: 600 13px/1 var(--f-body); fill: var(--navy); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; font: 500 14px/1.3 var(--f-body); }
.pick select { font: 500 15px/1.2 var(--f-body); color: var(--ink); background: #fff; border: 1.5px solid var(--navy); border-radius: 2px; padding: 10px 12px; min-height: 44px; max-width: 100%; }

.file { position: sticky; top: 16px; border: 1px solid var(--line); background: #fff; padding: clamp(20px, 3vw, 30px); min-height: 260px; }
@media (max-width: 900px) { .file { position: relative; scroll-margin-top: 12px; } }
.file-empty { display: grid; justify-items: center; gap: 14px; text-align: center; padding-block: 30px; color: var(--ink-soft); }
.file-empty .stamp { width: 120px; rotate: -8deg; opacity: 0.85; }
.file .k { font: 600 11.5px/1.3 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; color: var(--orange-d); }
.file h3 { font: 800 clamp(26px, 3vw, 36px)/1.05 var(--f-body); text-transform: uppercase; letter-spacing: -0.01em; margin-top: 6px; color: var(--navy); padding-right: 96px; }
.file .other { font: italic 600 19px/1.2 var(--f-serif); color: var(--ink-soft); margin-top: 4px; }
.file-msg { font: 300 16px/1.55 var(--f-body); margin-top: 18px; padding: 14px 16px; background: var(--cream); }
.file .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.file .done-mark { position: absolute; top: 14px; right: 14px; width: 92px; }
.file .done-mark .pstamp { width: 92px; padding: 10px; outline-offset: -7px; border-width: 2px; }
.file .done-mark .pstamp b { font-size: 11px; }
.file .done-mark .pstamp small { font-size: 7px; }
@keyframes stamp-in { 0% { transform: scale(1.6) rotate(-25deg); opacity: 0; } 60% { transform: scale(0.92) rotate(4deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.stamp-in { animation: stamp-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.nav-btns { display: flex; gap: 8px; margin-left: auto; }
.nav-btns button { width: 44px; height: 44px; border: 1.5px solid var(--line); background: #fff; border-radius: 50%; cursor: pointer; font: 600 18px/1 var(--f-body); color: var(--navy); }
.nav-btns button:hover { border-color: var(--navy); }

/* country stamp */
.pstamp { display: inline-grid; place-items: center; align-content: center; gap: 3px; width: 168px; aspect-ratio: 1; border-radius: 50%; border: 3px solid currentColor; outline: 1.5px solid currentColor; outline-offset: -11px; color: var(--c-am); text-align: center; rotate: -9deg; mix-blend-mode: multiply; padding: 18px; }
.pstamp b { font: 800 16px/1.1 var(--f-body); letter-spacing: 0.06em; text-transform: uppercase; overflow-wrap: anywhere; }
.pstamp small { font: 600 9.5px/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; }
.pstamp b.long { font-size: 13px; letter-spacing: 0.02em; overflow-wrap: normal; }
.stamps .pstamp b.long { font-size: 10.5px; }
.file .done-mark .pstamp b.long { font-size: 9px; }

/* passport */
.progress { height: 14px; margin-top: 18px; background: #f4f2ee; border: 1px solid var(--line); overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(-55deg, var(--orange) 0 6px, #ff9a5c 6px 9px); transition: width 0.4s; }
.challenges { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
@media (max-width: 900px) { .challenges { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .challenges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.challenges li { border: 1.5px dashed rgba(28, 26, 23, 0.25); padding: 12px; display: grid; gap: 4px; }
.challenges li b { font: 700 13px/1.2 var(--f-body); }
.challenges li span { font: 400 12px/1.4 var(--f-body); color: var(--ink-soft); }
.challenges li.open { border-style: solid; border-color: var(--orange-d); background: #fff6ef; }
.challenges li.open b, .challenges li.open span:last-child { color: var(--orange-d); }
.stamps { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; margin-top: 26px; }
.stamps .pstamp { width: 100%; max-width: 132px; padding: 14px; border-width: 2.5px; outline-offset: -9px; justify-self: center; }
.stamps .pstamp b { font-size: 12.5px; }
.stamps .pstamp small { font-size: 8px; }
@media (max-width: 560px) { .stamps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .stamps .pstamp { padding: 8px; outline-offset: -6px; border-width: 2px; } .stamps .pstamp b { font-size: 10px; } .stamps .pstamp b.long { font-size: 8.5px; } .stamps .pstamp small { font-size: 6.5px; } }
.stamps-empty, .stamps-done { grid-column: 1 / -1; padding: 26px; border: 1.5px dashed var(--line); text-align: center; }
.stamps-done { border: 2px solid var(--orange-d); color: var(--orange-d); background: #fff6ef; }
.stamps-note { margin-top: 18px; }
.linkish { border: 0; background: none; padding: 0; color: var(--orange-d); text-decoration: underline; cursor: pointer; font: inherit; }

.passport-soon { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 44px; padding: clamp(20px, 3vw, 30px); border: 1.5px dashed rgba(28, 26, 23, 0.28); }
@media (max-width: 560px) { .passport-soon { grid-template-columns: minmax(0, 1fr); } .passport-soon .draw { max-width: 200px; } }
.passport-soon p { font: 300 15.5px/1.55 var(--f-body); margin: 6px 0 12px; max-width: 52ch; }