:root {
        --paper: #ebe8df;
        --paper-hi: #f5f2ea;
        --ink: #1f2421;
        --muted: #6c7068;
        --line: #c6c5ba;
        --signal: #b84d35;
        --page: min(1280px, calc(100% - 96px));
      }

      @font-face {
        font-family: "HarmonyOSSans";
        src: url("/assets/fonts/HarmonyOSSans.woff2") format("woff2");
        font-display: swap;
      }

      * { box-sizing: border-box; }
      html, body { min-height: 100%; }
      body {
        position: relative;
        display: flex;
        min-height: 100svh;
        flex-direction: column;
        margin: 0;
        overflow-x: hidden;
        background: var(--paper);
        color: var(--ink);
        font-family: "HarmonyOSSans", "Noto Sans SC", Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
      }

      body::before {
        position: fixed;
        z-index: 0;
        inset: 0;
        pointer-events: none;
        content: "";
        opacity: .27;
        background-image:
          linear-gradient(90deg, transparent 49.95%, rgba(31, 36, 33, .07) 50%, transparent 50.05%),
          linear-gradient(0deg, transparent 49.95%, rgba(31, 36, 33, .05) 50%, transparent 50.05%);
        background-size: 96px 96px;
        mask-image: linear-gradient(to bottom, #000, transparent 82%);
      }

      .frame {
        position: fixed;
        z-index: 2;
        inset: 24px;
        pointer-events: none;
        border: 1px solid var(--line);
      }

      .frame::before,
      .frame::after {
        position: absolute;
        width: 11px;
        height: 11px;
        content: "";
        background:
          linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat,
          linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
      }

      .frame::before { top: -6px; left: -6px; }
      .frame::after { right: -6px; bottom: -6px; }

      header,
      footer,
      main { position: relative; z-index: 1; width: var(--page); margin-inline: auto; }

      header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 86px;
        border-bottom: 1px solid var(--line);
        color: var(--muted);
        font-size: 10px;
        letter-spacing: .18em;
        text-transform: uppercase;
      }

      header strong { color: var(--signal); font-weight: 400; }

      main {
        display: flex;
        min-height: calc(100svh - 194px);
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding-block: 100px 120px;
      }

      .kicker {
        margin: 0;
        color: var(--signal);
        font-size: 11px;
        letter-spacing: .2em;
        text-transform: uppercase;
      }

      h1 {
        max-width: 920px;
        margin: 27px 0 0 -8px;
        font-family: Georgia, "Times New Roman", serif;
        font-size: clamp(72px, 13vw, 178px);
        font-weight: 400;
        letter-spacing: -.075em;
        line-height: .86;
      }

      h1 em { color: var(--signal); font-style: italic; }

      .lower {
        display: grid;
        max-width: 900px;
        grid-template-columns: minmax(0, 1fr) 240px;
        gap: 50px;
        align-items: end;
        margin-top: 70px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
      }

      .lower p {
        max-width: 520px;
        margin: 0;
        color: #454a44;
        font-size: 16px;
        line-height: 1.95;
      }

      .signal { justify-self: end; color: var(--muted); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; }
      .signal-row { display: flex; align-items: center; gap: 10px; }
      .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 5px rgba(184, 77, 53, .12); }
      .signal strong { display: block; margin-top: 18px; color: var(--ink); font: 44px/1 Georgia, serif; }

      footer {
        display: flex;
        min-height: 74px;
        align-items: center;
        justify-content: space-between;
        border-top: 1px solid var(--line);
        color: var(--muted);
        font-size: 10px;
        letter-spacing: .16em;
        text-transform: uppercase;
      }

      @media (max-width: 700px) {
        :root { --page: calc(100% - 40px); }
        .frame { inset: 12px; }
        header { min-height: 70px; }
        main { min-height: calc(100svh - 144px); padding-block: 76px 88px; }
        h1 { margin-top: 22px; font-size: clamp(66px, 19vw, 110px); }
        .lower { grid-template-columns: 1fr; gap: 28px; margin-top: 54px; }
        .signal { justify-self: start; }
        footer { min-height: 86px; flex-wrap: wrap; gap: 8px 20px; padding-block: 20px; }
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { scroll-behavior: auto !important; }
      }