/* HDX v2 design tokens, copied from OCHA-DAP/ds-geospatial-impact-estimates' pages template
 * (itself from OCHA-DAP/ds-storm-impact-harmonisation) so the team's Pages sites read as one
 * system. Gate-form styles dropped: nothing on this site is passphrase-gated.
 *
 * Light mode only, matching the reference: there is deliberately no prefers-color-scheme rule.
 * The only media queries are the 640px breakpoint and prefers-reduced-motion. */
:root {
  --b5:#269777; --b6:#1e795f; --b7:#18614c; --b05:#e9f5f1; --b1:#d4eae4;
  --n9:#1f2324; --n8:#3f4748; --n7:#5e6a6b; --n05:#f5f7f7;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--n05); color:var(--n9);
  font-family:'Roboto',system-ui,-apple-system,'Segoe UI','Helvetica Neue',Arial,sans-serif;
  line-height:1.5;
}
.wrap { max-width:1080px; margin:0 auto; background:#fff; min-height:100vh;
        box-shadow:0 0 40px rgba(31,35,36,.06); }

/* ── hero ─────────────────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; background:var(--b6); padding:56px 44px 48px; }
.hero canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; }
.hero .inner { position:relative; z-index:1; }
.eyebrow { font-size:11px; letter-spacing:.15em; text-transform:uppercase; font-weight:700;
           color:rgba(255,255,255,.88); margin:0 0 12px;
           text-shadow:0 1px 8px rgba(0,0,0,.25); }
.hero h1 { font-family:'Merriweather',Georgia,'Times New Roman',serif; font-weight:700;
           font-size:34px; line-height:1.2; color:#fff; margin:0 0 14px;
           text-shadow:0 2px 16px rgba(0,0,0,.28); }
.hero p { margin:0; font-size:15px; line-height:1.6; color:#fff; max-width:64ch;
          text-shadow:0 1px 10px rgba(0,0,0,.25); }

/* ── cards ────────────────────────────────────────────────────────────── */
main { padding:36px 44px 8px; }
.label { font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
         color:var(--n7); margin:0 0 16px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }

.k { display:flex; flex-direction:column; text-decoration:none; color:inherit;
     background:#fff; border:1px solid #e2e7e7; border-top:3px solid var(--b5);
     border-radius:5px; padding:18px 19px 14px;
     transition:box-shadow .18s ease, transform .18s ease; }
.k:hover, .k:focus-visible { box-shadow:0 4px 20px rgba(31,35,36,.10);
                             transform:translateY(-2px); outline:none; }
.k:focus-visible { border-color:var(--b5); box-shadow:0 0 0 3px var(--b1); }
.k h2 { font-family:'Merriweather',Georgia,serif; margin:0 0 8px; font-size:16px;
        font-weight:700; color:var(--b6); line-height:1.25; }
.k p { margin:0 0 14px; font-size:13.5px; color:var(--n8); line-height:1.55; flex:1; }
.k .foot { display:flex; justify-content:space-between; align-items:center; gap:10px;
           font-size:10.5px; color:var(--n7); text-transform:uppercase;
           letter-spacing:.06em; border-top:1px solid #f0f3f3; padding-top:10px; }
.k .foot em { font-style:normal; color:var(--b5); font-weight:500; }
.k .foot span { color:var(--n7); }

.chip { display:inline-block; font-size:9px; padding:2.5px 7px; border-radius:10px;
        margin-left:7px; text-transform:uppercase; letter-spacing:.07em; font-weight:700;
        vertical-align:2.5px; font-family:'Roboto',sans-serif; }
.chip-ext { background:var(--b05); color:var(--b7); border:1px solid var(--b1); }

/* ── notes / footer ───────────────────────────────────────────────────── */
.note { margin:30px 44px 40px; padding:13px 17px; border-radius:4px;
        background:var(--b05); border-left:5px solid var(--b5);
        font-size:12.5px; color:var(--n8); line-height:1.6; }
.note code { background:#fff; border:1px solid var(--b1); padding:1.5px 6px;
             border-radius:3px; font-size:11.5px; color:var(--b7); }
.note a { color:var(--b6); }
.note p { margin:0 0 9px; }
.note p:last-child { margin-bottom:0; }

@media (max-width:640px) {
  .hero { padding:40px 22px 34px; }
  .hero h1 { font-size:26px; }
  main { padding:26px 22px 4px; }
  .note { margin:24px 22px 32px; }
}
/* Respect users who ask for less motion — the canvas paints one static frame. */
@media (prefers-reduced-motion:reduce) { .hero canvas { animation:none; } }

/* ── feature card (the app) ───────────────────────────────────────────────
 * The app had been at / until the Pages restructure, so most people reaching
 * this page were trying to reach IT. It gets its own row and a screenshot:
 * someone who knows the tool recognises it far faster than they read a card.
 *
 * The image is a flex ITEM, not a background, so it keeps its intrinsic ratio
 * and cannot crop the map's edges away at an unlucky viewport. */
.grid-one { grid-template-columns:1fr; }
.label-2 { margin-top:30px; }

.k-feature { flex-direction:row; align-items:stretch; gap:0; padding:0; overflow:hidden; }
.k-feature .body { display:flex; flex-direction:column; padding:18px 19px 14px;
                   flex:1 1 48%; min-width:0; }
/* .k p grows by default so the foot sits at the bottom of a text-only card. In
 * the feature card the image already sets the height, so growing the paragraph
 * just opens a gap between it and the line beneath. Let the text sit at the top
 * and push the FOOT down instead. */
.k-feature .body p { flex:0 0 auto; margin-bottom:10px; }
.k-feature .shot { flex:1 1 52%; min-width:0; display:flex; align-items:flex-start;
                   background:var(--n05); border-left:1px solid #eef1f1; }
.k-feature .shot img { width:100%; height:auto; display:block; }
/* The right-hand cell of the foot is a plain span, not the /path/ em — say where
 * the reader has just come from, since that is the question they arrived with. */
.k-feature .foot span { color:var(--n7); }

@media (max-width:760px) {
  /* Stack before the text column gets too narrow to read; the screenshot is
     still worth showing, just beneath rather than beside. */
  .k-feature { flex-direction:column; }
  .k-feature .shot { border-left:0; border-top:1px solid #eef1f1; }
}
.k-feature .views { flex:0 0 auto; font-size:12px; color:var(--n7);
                    line-height:1.7; margin-bottom:14px; }
.k-feature .foot { margin-top:auto; }