body {
      margin:0;
      font-family:'Inter',sans-serif;
      background:#faf7f5;
      color:#222;
      line-height:1.6;
    }

    .hero {
      background:url('/graph/story/story_5.jpg') no-repeat center/cover;
      padding:80px 20px;
      text-align:center;
      color:#fff;
    }

    .hero h1 {
      font-family:'Playfair Display',serif;
      font-size:40px;
      margin:0;
    }

    .container {
      max-width:1000px;
      margin:40px auto;
      padding:24px;
    }

    .story-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
      gap:24px;
    }

    .story {
      background:#fff;
      padding:20px;
      border-radius:12px;
      box-shadow:0 8px 20px rgba(0,0,0,0.08);
    }

    .story img {
      width:100%;
      height:200px;
      object-fit:cover;
      border-radius:8px;
      margin-bottom:12px;
    }

    .story h3 {
      font-family:'Playfair Display',serif;
      color:#d63c35;
      margin:0 0 10px;
      font-size:22px;
    }

    .story p {
      font-size:15px;
      color:#444;
    }

    .flags {
      font-size:14px;
      color:#777;
      font-style:italic;
      margin-bottom:10px;
    }

    .cta {
      text-align:center;
      margin-top:40px;
    }

    .btn {
      background:#d63c35;
      color:#fff;
      border:none;
      padding:14px 24px;
      border-radius:8px;
      font-weight:600;
      cursor:pointer;
      font-size:16px;
      text-decoration:none;
      display:inline-block;
    }

    .btn:hover {
      background:#b8302a;
    }