/* Reading pages: about, projects, records, updates, contact, giving, where your gift goes.
   Loaded after /styles.css. Only adds what the page templates need. */

/* chrome on paper pages: the pill sits on a forest gradient, keep light ink there.
   The in-page bar (.pw-bar) is no longer rendered; the pill is the menu on every page and app.js docks it from load. */
.pw-paper .pw-pill { --sc-ink: #F3ECDD; --sc-accent: #E2A34A; color: #F3ECDD; }
.pw-page .pw-pill { z-index: 90; }
/* let the card aspect ratio win over the intrinsic height attribute */
.pw-record img { height: auto; }

/* page head */
.pw-page-head { padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.pw-page-head .pw-label { display: block; margin-bottom: 0.9rem; }
.pw-page-head h1 { font-family: var(--sc-font-display); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
.pw-page-head time { color: var(--sc-accent); }
.pw-page-head .pw-lede a { color: inherit; }

/* prose */
.pw-prose .pw-lede { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-style: italic; margin-top: var(--sc-4); }
.pw-prose h2:first-child { margin-top: 0; }
.pw-prose p + h3, .pw-prose ul + h3 { margin-top: var(--sc-6); }
.pw-prose h3 + p, .pw-prose h3 + ul, .pw-prose h2 + p, .pw-prose h2 + ul { margin-top: var(--sc-3, 0.75rem); }
.pw-prose ul + ul, .pw-prose ul + p, .pw-prose p + ul { margin-top: var(--sc-4); }
.pw-prose .pw-src, .pw-prose .pw-honest { margin-top: var(--sc-5); }
.pw-prose .pw-backlink { margin-top: var(--sc-6); }
.pw-prose blockquote { margin: var(--sc-5) 0 0; padding-left: 1.2rem; border-left: 3px solid var(--sc-accent); }
.pw-prose blockquote p { font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-style: italic; }
.pw-prose blockquote cite { display: block; margin-top: 0.5rem; font-style: normal; font-size: 0.86rem; color: var(--sc-ink-soft); }
.pw-prose .pw-sign { margin-top: var(--sc-5); }
.pw-prose .pw-caption-note { font-size: 0.86rem; color: var(--sc-ink-soft); font-style: italic; }
.pw-prose dl, .pw-facts dl, .pw-office dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: var(--sc-4) 0 0; }
.pw-prose dt, .pw-facts dt, .pw-office dt { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: 0.15rem; }
.pw-prose dd, .pw-facts dd, .pw-office dd { margin: 0; }
.pw-page-head + .pw-story, .pw-page-head + .sc-wrap { padding-top: clamp(1rem, 3vw, 2rem); }
.pw-page .sc-wrap + .sc-wrap { margin-top: clamp(2.5rem, 6vw, 5rem); }

/* asides on about and contact */
.pw-story__aside h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); }
.pw-facts, .pw-office { border-top: 1px solid var(--pw-hair-dark); padding-top: var(--sc-4); }
.pw-facts p { margin-top: var(--sc-4); }
.pw-office + .pw-office { margin-top: 0; }
.pw-page:not(.pw-paper) .pw-facts, .pw-page:not(.pw-paper) .pw-office { border-top-color: var(--pw-hair-light); }
.pw-story__aside figure { margin: 0; }
.pw-story__aside figure img { display: block; width: 100%; height: auto; border-radius: var(--pw-r); box-shadow: var(--sc-e2); }
.pw-story__aside figcaption { margin-top: 0.6rem; font-size: 0.82rem; color: var(--sc-ink-soft); }
@media (max-width: 900px) { .pw-story__aside { position: static; } }

/* gallery on about: static figures, and the projects gallery that fills client-side */
.pw-gallery--static { margin-top: 0; }
.pw-photos .pw-gallery { margin-top: var(--sc-5); }
.pw-photos .pw-gallery figcaption { text-transform: capitalize; }

/* records grid: cards without a link (funds) and cards on paper */
.pw-funds .pw-record { cursor: default; }
.pw-funds .pw-record:hover { transform: none; box-shadow: 0 0 0 1px rgb(243 236 221 / 0.1); }
.pw-funds { margin-top: var(--sc-5); }
.pw-funds + .pw-prose { margin-top: var(--sc-5); }
.pw-paper .pw-record time { color: var(--pw-amber-deep); }

/* forms */
.pw-form button { justify-self: start; }
.pw-form .pw-src { margin: 0; }
.pw-honest { padding: 0.9rem 1rem; border-radius: var(--pw-r); background: rgb(226 163 74 / 0.12); box-shadow: 0 0 0 1px rgb(226 163 74 / 0.35) inset; }

/* footer of reading pages */
.pw-page .pw-footer { margin-top: clamp(3rem, 8vw, 6rem); }

/* country story pages (scripts/build-countries.mjs) */
.pw-country-head h1 { display: flex; align-items: center; gap: 0.35em; flex-wrap: wrap; }
.pw-country-head h1 .pw-country-flag { width: 0.62em; height: auto; aspect-ratio: 3 / 2; border-radius: 0.08em; box-shadow: 0 0 0 1px rgb(23 33 29 / 0.18); }
.pw-country-story .pw-prose h2, .pw-country-pages .pw-prose h2, .pw-country-photos .pw-prose h2, .pw-country-close .pw-prose h2 { font-family: var(--sc-font-display); font-weight: 500; }
.pw-country-records { list-style: none; margin: var(--sc-4) 0 0; padding: 0; display: grid; gap: 0.55rem; }
.pw-country-records li { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.2rem 0.9rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--pw-hair-dark); }
.pw-country-records li:last-child { border-bottom: 1px solid var(--pw-hair-dark); }
.pw-country-year { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pw-amber-deep); }
.pw-country-when { grid-column: 2; font-size: 0.82rem; color: var(--sc-ink-soft); }
.pw-country-photos .pw-gallery--static { margin-top: var(--sc-5); }
.pw-country-photos .pw-gallery img { box-shadow: var(--sc-e2); }
.pw-country-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: var(--sc-4); }

/* the index of ten */
.pw-country-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: clamp(1rem, 2.5vw, 1.6rem); margin-top: var(--sc-6); }
.pw-country-card { display: grid; align-content: start; gap: 0.5rem; padding: 1.1rem 1.2rem 1.3rem; border-radius: var(--pw-r-lg); background: #fff; box-shadow: 0 0 0 1px var(--pw-hair-dark); text-decoration: none; color: inherit; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.pw-country-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgb(226 163 74 / 0.6), var(--sc-e2); }
.pw-country-card:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; }
.pw-country-card__head { display: flex; align-items: center; gap: 0.6rem; }
.pw-country-card h2 { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.1; }
.pw-country-card p { font-size: 0.88rem; color: var(--sc-ink-soft); }
.pw-country-status { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: 0.3rem; }
.pw-country-status--full { color: var(--pw-amber-deep); }

/* Blog: country story cards with the country labelled above each, then the Nepal reports */
.pw-records--stories { margin-top: var(--sc-5); }
.pw-story-card > .pw-label { display: block; margin-bottom: 0.5rem; }
.pw-story-card .pw-record { height: calc(100% - 1.6rem); }
.pw-blog-section { margin-top: clamp(3rem, 8vw, 6rem); }
.pw-blog-label { display: block; font-size: 0.8rem; margin-bottom: var(--sc-4); }
.pw-blog-section .pw-records { margin-top: 0; }