/* HDX v2 design tokens, following the team's Pages landing-page template
 * (OCHA-DAP/ds-storm-impact-harmonisation → ds-geospatial-impact-estimates → ds-seas5-skill),
 * in the HDX primary (blue) scale so the landing page matches the monitoring page's header.
 *
 * Light mode only, matching the reference: there is deliberately no prefers-color-scheme rule.
 * The only media queries are the 640px/760px breakpoints and prefers-reduced-motion. */
:root {
  --b5:#1862d8; --b6:#134ead; --b7:#0e3b82; --b05:#e8effb; --b1:#d1e0f7;
  --hero:#0a2756;
  --n9:#1f2324; --n8:#3f4748; --n7:#5e6a6b; --n05:#f5f7f7;
  --w05:#fbf4ea; --w2:#eed2aa; --w5:#d48f2a; --w8:#553911;
}
* { 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(--hero); 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); }

/* ── standing notice (framework not active) ───────────────────────────── */
.notice { background:var(--w05); border-bottom:1px solid var(--w2); padding:12px 44px; }
.notice p { margin:0; border-left:4px solid var(--w5); padding-left:14px;
            color:var(--w8); font-size:13.5px; line-height:1.55; }

/* ── 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; }

.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; }
  .notice { padding:10px 22px; }
  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 monitoring page) ───────────────────────────────────
 * The monitoring page was at / until the restructure, so most people reaching
 * this page are trying to reach IT. It gets its own row and a picture: someone
 * who knows the page recognises the plot 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 plot'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 62%; min-width:0; }
.k-feature .body p { flex:0 0 auto; margin-bottom:10px; }
.k-feature .shot { flex:1 1 38%; min-width:0; display:flex; align-items:flex-start;
                   background:var(--n05); border-left:1px solid #eef1f1; padding:12px; }
.k-feature .shot img { width:100%; height:auto; display:block; }
.k-feature .foot span { color:var(--n7); }
.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; }

@media (max-width:760px) {
  .k-feature { flex-direction:column; }
  .k-feature .shot { border-left:0; border-top:1px solid #eef1f1; }
}