:root {
      color-scheme: dark;
      --ink: #f2f0e7;
      --muted: #aaa99f;
      --line: rgba(242, 240, 231, .14);
      --panel: rgba(255, 255, 255, .045);
      --amber: #f1b44c;
      --rust: #c8673d;
      --green: #849e74;
      --blue: #7894ad;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at 80% 12%, rgba(200, 103, 61, .12), transparent 32rem),
        radial-gradient(circle at 10% 70%, rgba(120, 148, 173, .08), transparent 34rem),
        #171914;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
    }

    main, footer { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }

    .hero {
      min-height: 86vh;
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: clamp(32px, 7vw, 96px);
      align-items: center;
      padding: 72px 0 56px;
      border-bottom: 1px solid var(--line);
    }

    .eyebrow {
      margin: 0 0 18px;
      color: var(--amber);
      font-size: .76rem;
      font-weight: 750;
      letter-spacing: .2em;
      text-transform: uppercase;
    }

    h1 {
      max-width: 760px;
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(3.3rem, 8.2vw, 7.8rem);
      font-weight: 500;
      letter-spacing: -.055em;
      line-height: .91;
    }

    .lead {
      max-width: 650px;
      margin: 30px 0 0;
      color: #cfcec5;
      font-size: clamp(1.05rem, 2vw, 1.3rem);
    }

    .resistor {
      position: relative;
      height: 250px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .resistor::before,
    .resistor::after {
      content: "";
      width: 32%;
      height: 3px;
      background: linear-gradient(90deg, transparent, #a4a59f);
    }

    .resistor::after { background: linear-gradient(90deg, #a4a59f, transparent); }

    .body {
      position: relative;
      width: 46%;
      min-width: 180px;
      height: 78px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 19px;
      background: linear-gradient(180deg, #d4c8a4, #9f916d);
      box-shadow: 0 28px 70px rgba(0,0,0,.34), inset 0 1px rgba(255,255,255,.5);
    }

    .band { position: absolute; inset-block: 0; width: 13px; opacity: .92; }
    .band:nth-child(1) { left: 22%; background: var(--rust); }
    .band:nth-child(2) { left: 38%; background: #22231f; }
    .band:nth-child(3) { left: 55%; background: var(--amber); }
    .band:nth-child(4) { right: 15%; width: 8px; background: #b79c4b; }

    section { padding: 84px 0; border-bottom: 1px solid var(--line); }

    .section-grid {
      display: grid;
      grid-template-columns: .72fr 1.28fr;
      gap: clamp(32px, 8vw, 110px);
      align-items: start;
    }

    h2 {
      margin: 0;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(2.1rem, 4vw, 4rem);
      font-weight: 500;
      letter-spacing: -.035em;
      line-height: 1.04;
    }

    .copy p { margin: 0 0 1.25em; color: #c6c5bd; font-size: 1.08rem; }
    .copy p:first-child { color: var(--ink); font-size: 1.3rem; }

    .timeline {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin-top: 48px;
    }

    .moment {
      min-height: 210px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: var(--panel);
    }

    .moment time { color: var(--amber); font-weight: 760; }
    .moment h3 { margin: 45px 0 8px; font-size: 1.08rem; }
    .moment p { margin: 0; color: var(--muted); font-size: .95rem; }

    .principle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .formula {
      display: grid;
      place-items: center;
      min-height: 290px;
      border-radius: 22px;
      background: var(--amber);
      color: #201d16;
      font-family: Georgia, "Times New Roman", serif;
      font-size: clamp(4rem, 9vw, 8rem);
      letter-spacing: -.07em;
    }

    .quote {
      padding: 36px;
      border: 1px solid var(--line);
      border-radius: 22px;
      background: var(--panel);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .quote p { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.18; }
    .quote small { margin-top: 34px; color: var(--muted); }

    footer { padding: 38px 0 56px; color: #85867f; font-size: .9rem; }

    @media (max-width: 760px) {
      main, footer { width: min(100% - 28px, 1080px); }
      .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 54px; }
      .resistor { height: 160px; }
      .section-grid, .principle { grid-template-columns: 1fr; }
      .timeline { grid-template-columns: 1fr; }
      section { padding: 62px 0; }
      .moment { min-height: auto; }
      .moment h3 { margin-top: 24px; }
    }