:root {
      --ink: #172033;
      --muted: #667085;
      --accent: #ff5b22;
      --accent-soft: #fff1e8;
      --paper: #fbfcfd;
      --line: rgba(23, 32, 51, .11);
      --shadow: 0 22px 70px rgba(73, 53, 31, .1);
      --sans: Inter, "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      --serif: Georgia, "Times New Roman", serif;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 4px; }
    img { display: block; max-width: 100%; height: auto; }
    .page { min-height: 100vh; background: radial-gradient(circle at 12% 8%, rgba(255, 246, 235, .95), transparent 30rem), radial-gradient(circle at 92% 12%, rgba(255, 91, 34, .08), transparent 34rem), linear-gradient(180deg, #fffaf2 0%, #fbfcfd 54%, #f6f1e9 100%); }
    .article-shell { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 30px 0 86px; }
    .article-mark { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.35; text-decoration: none; }
    .article-mark img { width: 116px; }
    .hero { margin-top: 18px; padding: clamp(28px, 5vw, 64px); overflow: hidden; border: 1px solid rgba(23, 32, 51, .08); border-radius: 8px; background: rgba(255, 255, 255, .76); box-shadow: var(--shadow); }
    .kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #566174; font-size: 12px; font-weight: 820; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
    .kicker::before { width: 26px; height: 2px; border-radius: 999px; background: var(--accent); content: ""; }
    h1 { max-width: 900px; margin: 0; color: #111827; font-size: clamp(34px, 3.7vw, 52px); font-weight: 600; line-height: 1.12; }
    .lead { max-width: 760px; margin: 24px 0 0; color: #475467; font-size: clamp(17px, 1.45vw, 19px); line-height: 1.64; }
    .meta-row { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 26px 0 0; padding: 0; color: var(--muted); font-size: 14px; font-weight: 700; line-height: 1.45; list-style: none; }
    figure { margin: 0; }
    .hero-figure { margin-top: clamp(32px, 5vw, 54px); }
    .hero-figure picture { display: block; overflow: hidden; border-radius: 8px; }
    .hero-figure img { width: 100%; height: clamp(360px, 36vw, 500px); border: 1px solid rgba(23, 32, 51, .08); border-radius: 8px; box-shadow: 0 16px 46px rgba(73, 53, 31, .08); object-fit: cover; object-position: center; }
    figcaption { max-width: 780px; margin: 12px auto 0; color: #6b7688; font-size: 13.5px; line-height: 1.55; text-align: center; }
    .article-content { width: min(800px, 100%); margin: 66px auto 0; }
    .article-body { color: #2f3a4a; font-family: var(--serif); font-size: clamp(18px, 1.18vw, 20px); line-height: 1.72; }
    .article-body p { margin: 0 0 24px; }
    .article-body h2 { margin: 54px 0 18px; color: #172033; font-family: var(--sans); font-size: clamp(25px, 2.1vw, 32px); font-weight: 650; line-height: 1.2; }
    .article-body ul { margin: -4px 0 28px; padding: 0; list-style: none; }
    .article-body li { position: relative; margin: 10px 0; padding-left: 25px; }
    .article-body li::before { position: absolute; top: .72em; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); content: ""; }
    .note { margin: 34px 0 42px; padding: 22px 24px; border: 1px solid rgba(255, 91, 34, .2); border-radius: 8px; background: var(--accent-soft); color: #4d382e; font-family: var(--sans); font-size: 16px; line-height: 1.62; }
    .note p { margin: 0; }
    .article-contact { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); font-family: var(--sans); }
    .article-footer { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 32px; padding-top: 25px; border-top: 1px solid var(--line); color: #7a8493; font-family: var(--sans); font-size: 13px; }
    .article-footer a { color: #5e6877; }
    @media (max-width: 760px) {
      .article-shell { width: min(100% - 28px, 680px); padding-top: 18px; padding-bottom: 52px; }
      .article-mark { margin-bottom: 18px; }
      .article-mark img { width: 102px; }
      .hero { margin-top: 8px; padding: 25px 20px 22px; }
      h1 { font-size: 33px; }
      .lead { margin-top: 18px; font-size: 16px; line-height: 1.58; }
      .meta-row { margin-top: 19px; font-size: 13px; }
      .hero-figure { margin: 28px -20px -22px; }
      .hero-figure picture, .hero-figure img { border-radius: 0; border-right: 0; border-bottom: 0; border-left: 0; }
      .hero-figure img { height: 250px; }
      .hero-figure figcaption { padding: 0 14px 12px; font-size: 12px; }
      .article-content { margin-top: 44px; }
      .article-body { font-size: 18px; line-height: 1.72; }
      .article-body h2 { margin-top: 42px; font-size: 25px; }
      .note { margin: 28px 0 34px; padding: 18px; font-size: 15px; }
    }