* {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      background: #f5f1e9;
      color: #17202a;
      font-family: Georgia, "Times New Roman", serif;
      line-height: 1.65;
    }

    a {
      color: inherit;
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      padding: 24px max(22px, 5vw);
      background: linear-gradient(135deg, #061426, #071a2e 65%, #11395f);
      border-bottom: 5px solid #d52535;
      color: #fff;
    }

    .brand {
      font: 900 clamp(2rem, 5vw, 3.5rem)/.9 Arial, sans-serif;
      letter-spacing: -.07em;
    }

    .brand span {
      color: #ef3d4d;
    }

    .nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 7px;
    }

    .nav a {
      padding: 7px 9px;
      border: 1px solid rgba(255, 255, 255, .35);
      border-radius: 5px;
      color: #fff;
      font: 700 .76rem Arial, sans-serif;
      text-decoration: none;
    }

    .nav a:hover,
    .nav a:focus {
      background: #d52535;
      border-color: #d52535;
    }

    .hero {
      padding: clamp(45px, 8vw, 90px) max(22px, 7vw) clamp(35px, 6vw, 62px);
      background: linear-gradient(120deg, #e7dfd2, #f8f5ef);
      border-bottom: 1px solid #d9d3c9;
    }

    .hero h1 {
      max-width: 1050px;
      margin: 0;
      color: #071a2e;
      font-size: clamp(2.7rem, 7vw, 5.5rem);
      line-height: .98;
      letter-spacing: -.045em;
    }

    .hero p {
      margin: 18px 0 0;
      color: #5c6670;
      font: 700 .95rem Arial, sans-serif;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .wrap {
      width: min(1160px, calc(100% - 32px));
      margin: 0 auto;
      padding: 38px 0 60px;
    }

    .note {
      margin: 0 0 32px;
      padding: 15px 18px;
      background: #fff7da;
      border-left: 5px solid #d39e00;
      border-radius: 0 8px 8px 0;
      color: #5d4b12;
      font: .88rem/1.55 Arial, sans-serif;
    }

    .story {
      overflow: hidden;
      margin: 0 0 42px;
      background: #fff;
      border: 1px solid #d9d3c9;
      border-radius: 16px;
      box-shadow: 0 10px 28px rgba(7, 26, 46, .09);
    }

    .story img {
      display: block;
      width: 100%;
      aspect-ratio: 16 / 9;
      object-fit: cover;
    }

    .copy {
      padding: clamp(22px, 4vw, 40px);
    }

    .k {
      margin-bottom: 9px;
      color: #c82026;
      font: 800 .78rem/1.2 Arial, sans-serif;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .story h2 {
      margin: 0 0 16px;
      color: #071a2e;
      font-size: clamp(2rem, 4.5vw, 3.35rem);
      line-height: 1.08;
      letter-spacing: -.025em;
    }

    .dek {
      margin: 0 0 18px;
      color: #384652;
      font-size: clamp(1.1rem, 2vw, 1.35rem);
      line-height: 1.5;
    }

    .body {
      margin: 0 0 20px;
      color: #333b42;
      font: 1.03rem/1.75 Arial, sans-serif;
    }

    .source {
      margin: 0;
      padding-top: 15px;
      border-top: 1px solid #e6e0d7;
      color: #64707a;
      font: .82rem Arial, sans-serif;
    }

    .source a {
      color: #971820;
      font-weight: 700;
    }

    .foot {
      padding: 34px 20px;
      background: #071a2e;
      color: #fff;
      font: .85rem Arial, sans-serif;
      text-align: center;
    }

    [dir="rtl"] .note {
      border-right: 5px solid #d39e00;
      border-left: 0;
      border-radius: 8px 0 0 8px;
    }

    @media (max-width: 720px) {
      .top {
        align-items: flex-start;
        flex-direction: column;
      }

      .nav {
        justify-content: flex-start;
      }

      .wrap {
        width: min(100% - 20px, 1160px);
        padding-top: 20px;
      }

      .story {
        margin-bottom: 24px;
        border-radius: 10px;
      }
    }