:root {
        color-scheme: light;
        --paper: #f8f2e7;
        --paper-deep: #efe3d0;
        --ink: #17212b;
        --muted: #5f6773;
        --accent: #175d78;
        --accent-strong: #0d4660;
        --rule-blue: rgba(92, 138, 184, 0.28);
        --rule-red: rgba(170, 71, 71, 0.34);
        --card: rgba(255, 251, 245, 0.92);
        --shadow: rgba(52, 37, 22, 0.14);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
      }

      body {
        color: var(--ink);
        font-family: "Avenir Next", "Trebuchet MS", "Segoe UI", sans-serif;
        background:
          radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 24rem),
          linear-gradient(
            90deg,
            transparent 0,
            transparent 5.5rem,
            var(--rule-red) 5.5rem,
            var(--rule-red) 5.6rem,
            transparent 5.6rem
          ),
          repeating-linear-gradient(
            180deg,
            transparent 0,
            transparent 2.15rem,
            var(--rule-blue) 2.15rem,
            var(--rule-blue) 2.23rem
          ),
          linear-gradient(180deg, #fcf9f3 0%, var(--paper) 100%);
      }

      main {
        width: min(980px, calc(100% - 28px));
        margin: 22px auto;
        padding: 30px 22px 34px 84px;
        position: relative;
        border-radius: 28px;
        border: 1px solid rgba(23, 33, 43, 0.08);
        background: rgba(248, 242, 231, 0.8);
        box-shadow:
          0 24px 64px var(--shadow),
          inset 0 1px 0 rgba(255, 255, 255, 0.72);
      }

      h1,
      h2 {
        font-family: "Georgia", "Times New Roman", serif;
      }

      h1 {
        margin: 0 0 10px;
        font-size: clamp(2.4rem, 7vw, 4.6rem);
        line-height: 0.96;
        letter-spacing: -0.05em;
      }

      h2 {
        margin: 28px 0 10px;
        font-size: 1.45rem;
      }

      p,
      li {
        color: var(--muted);
        line-height: 1.78;
        font-size: 1rem;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 18px;
        color: var(--accent);
        font-size: 12px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        width: 42px;
        height: 1px;
        background: currentColor;
      }

      .lede,
      .meta,
      .card,
      .footer {
        border-radius: 20px;
        background: var(--card);
        border: 1px solid rgba(23, 33, 43, 0.08);
        box-shadow: 0 12px 26px rgba(28, 36, 48, 0.06);
      }

      .lede,
      .meta,
      .card {
        padding: 18px 20px;
      }

      .meta {
        margin-top: 18px;
      }

      .grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        margin-top: 22px;
      }

      ul {
        margin: 10px 0 0;
        padding-left: 18px;
      }

      a {
        color: var(--accent);
      }

      .footer {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: space-between;
        margin-top: 28px;
        padding: 18px 20px;
      }

      @media (max-width: 900px) {
        main {
          padding: 24px 18px 28px 56px;
        }

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

      @media (max-width: 640px) {
        main {
          width: min(100%, calc(100% - 14px));
          margin: 7px auto;
          padding: 22px 14px 24px 42px;
          border-radius: 24px;
        }
      }