:root {
      color-scheme: light;
      --bg: #f7f6f2;
      --panel: rgba(255, 255, 255, 0.9);
      --panel-strong: rgba(255, 255, 255, 0.98);
      --ink: #2f3436;
      --ink-soft: #5f696c;
      --charcoal: #24292c;
      --navy: #314250;
      --sage: #dce5df;
      --sage-deep: #9fb0a8;
      --champagne: #cdb991;
      --line: rgba(70, 76, 70, 0.13);
      --line-strong: rgba(92, 82, 64, 0.24);
      --shadow: 0 24px 64px rgba(47, 55, 64, 0.08);
      --shadow-soft: 0 12px 28px rgba(47, 55, 64, 0.05);
      --radius-lg: 18px;
      --radius-md: 12px;
      --shell: min(1040px, calc(100% - 32px));
      --font-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
      --font-serif: "Shippori Mincho", "Yu Mincho", serif;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background:
        linear-gradient(90deg, rgba(82, 96, 90, 0.018) 1px, transparent 1px),
        linear-gradient(180deg, rgba(82, 96, 90, 0.014) 1px, transparent 1px),
        linear-gradient(180deg, #fbfaf7 0%, var(--bg) 56%, #eeece6 100%);
      background-size: 36px 36px, 36px 36px, auto;
      font-family: var(--font-sans);
      line-height: 1.84;
      letter-spacing: 0.01em;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    .shell {
      width: var(--shell);
      margin: 0 auto;
    }

    .page {
      padding: 0 0 88px;
    }

    .hero {
      position: relative;
      padding: clamp(100px, 14vw, 160px) 0 80px;
      overflow: hidden;
      background: #1b2430;
      margin-bottom: clamp(28px, 5vw, 44px);
    }

    .hero__bg {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(
          to right,
          rgba(10, 15, 20, 0.15) 0%,
          rgba(10, 15, 20, 0.35) 35%,
          rgba(10, 15, 20, 0.65) 70%,
          rgba(10, 15, 20, 0.85) 100%
        ),
        url("../images/world-map-dark.jpg");
      background-size: cover;
      background-position: center;
      z-index: 0;
      filter: blur(3px) brightness(1.15);
      transform: scale(1.02);
    }

    .hero__bg::before {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.08),
        rgba(255, 255, 255, 0)
      );
      content: "";
    }

    .hero .shell {
      position: relative;
      z-index: 1;
    }

    .hero__content {
      display: grid;
      gap: 18px;
      max-width: 720px;
      margin-left: 0;
      background: none;
      border: none;
      box-shadow: none;
      border-radius: 0;
      padding: 0;
    }

    .hero .eyebrow {
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.18em;
      text-transform: uppercase;
    }

    .hero h1 {
      color: rgba(255, 255, 255, 0.92);
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 6vw, 5.2rem);
      line-height: 1.05;
      letter-spacing: 0;
    }

    .hero .lead {
      max-width: 760px;
      color: rgba(255, 255, 255, 0.75);
      font-size: clamp(1rem, 1.5vw, 1.08rem);
    }

    .hero .source-note {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      align-items: center;
      color: rgba(255, 255, 255, 0.6);
      font-size: 0.86rem;
    }

    .hero .source-note a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 999px;
      background: transparent;
      color: #ffffff;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    .news-card__link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 34px;
      padding: 0 13px;
      border: 1px solid var(--line-strong);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.66);
      color: var(--navy);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
    }

    .hero .source-note a:hover,
    .hero .source-note a:focus-visible {
      border-color: #ffffff;
      background: rgba(255, 255, 255, 0.1);
      outline: none;
      transform: translateY(-1px);
    }

    .news-card__link:hover,
    .news-card__link:focus-visible {
      border-color: var(--navy);
      background: var(--panel-strong);
      outline: none;
      transform: translateY(-1px);
    }

    .news-list {
      display: grid;
      gap: 14px;
    }

    .news-card {
      display: grid;
      grid-template-columns: minmax(116px, 0.22fr) minmax(0, 1fr);
      gap: clamp(18px, 3vw, 30px);
      padding: clamp(20px, 3.4vw, 30px);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: var(--panel);
      box-shadow: var(--shadow-soft);
    }

    .news-card__meta {
      display: grid;
      align-content: start;
      gap: 8px;
      color: var(--ink-soft);
      font-size: 0.82rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .news-card__type {
      width: fit-content;
      padding: 3px 9px;
      border: 1px solid rgba(159, 176, 168, 0.5);
      border-radius: 999px;
      background: rgba(220, 229, 223, 0.64);
      color: var(--navy);
      font-size: 0.7rem;
    }

    .news-card__body {
      display: grid;
      gap: 12px;
    }

    .news-card h2 {
      color: var(--charcoal);
      font-family: var(--font-serif);
      font-size: clamp(1.25rem, 2.3vw, 1.72rem);
      line-height: 1.45;
      letter-spacing: 0;
    }

    .news-card p {
      color: var(--ink-soft);
      font-size: 0.98rem;
    }

    .news-card__link {
      width: fit-content;
      margin-top: 4px;
    }

    .lumiscent-note {
      position: relative;
      display: grid;
      gap: 8px;
      margin-top: 18px;
      padding: 15px 17px 15px 18px;
      border: 1px solid rgba(205, 185, 145, 0.28);
      border-left: 3px solid rgba(205, 185, 145, 0.78);
      border-radius: 14px;
      background:
        linear-gradient(135deg, rgba(255, 252, 245, 0.92), rgba(246, 248, 245, 0.86));
      box-shadow: 0 10px 24px rgba(47, 55, 64, 0.045);
    }

    .lumiscent-note__label {
      color: rgba(49, 66, 80, 0.72);
      font-family: var(--font-sans);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .lumiscent-note__text {
      color: var(--charcoal);
      font-family: var(--font-serif);
      font-size: 0.95rem;
      line-height: 1.72;
      letter-spacing: 0.02em;
    }

    .page-footer {
      margin-top: clamp(42px, 7vw, 72px);
      padding-top: 24px;
      border-top: 1px solid var(--line);
      color: var(--ink-soft);
      font-size: 0.84rem;
    }

    @media (max-width: 760px) {
      .hero {
        padding: 72px 0 56px;
        margin-bottom: 28px;
      }

      .hero__content {
        gap: 16px;
      }

      .news-card {
        grid-template-columns: 1fr;
      }

      .news-card__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
      }

      .lumiscent-note {
        margin-top: 16px;
        padding: 13px 14px 13px 15px;
      }

      .lumiscent-note__text {
        font-size: 0.9rem;
        line-height: 1.68;
      }
    }