:root {
    --bg: #f4efe6;
    --ink: #151515;
    --muted: #726b61;
    --line: #d7cec0;
    --panel: rgba(255, 250, 243, 0.9);
  }

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    background: var(--bg);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
  }

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

  header {
    position: fixed;
    inset: 0 0 auto 0;
    height: 72px;
    padding: 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    mix-blend-mode: difference;
    color: white;
  }

  .logo {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.1em;
  }

  nav {
    display: flex;
    gap: 16px;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.08em;
  }

  .menu-link {
    opacity: 0.72;
    transition: opacity 0.22s ease;
  }

  .menu-link:hover,
  .menu-link:focus-visible,
  .menu-link.is-active {
    opacity: 1;
    outline: none;
  }

  main {
    min-height: 100vh;
    padding: 110px 28px 42px;
    display: grid;
    place-items: center;
  }

  .thank-you-card { width: min(808px, 100%); padding: 26px 22px 22px; border: 1px solid rgba(21, 21, 21, 0.08); background: var(--panel); display: grid; gap: 20px; }

  .eyebrow {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  h1 {
    font-size: clamp(24px, 5.4vw, 64px);
    line-height: 0.86;
    letter-spacing: -0.08em;
    font-weight: 900;
    white-space: nowrap;
  }

  .order-number {
    font-size: clamp(22px, 3vw, 34px);
    letter-spacing: -0.06em;
  }

  .order-section { border-top: 1px solid var(--line); padding-top: 18px; display: grid; gap: 10px; }
  .order-section-title, .line-label { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .order-heading { display: grid; grid-template-columns: minmax(0, 1fr) 74px 96px; gap: 14px; padding: 0 14px; }
  .order-heading span:last-child, .order-line-price { text-align: right; }
  .order-lines { display: grid; }
  .order-line { display: grid; grid-template-columns: 154px minmax(0, 1fr) 74px 96px; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .order-line img { width: 154px; height: 108px; object-fit: cover; background: #e8e0d4; }
  .order-line-copy { display: grid; gap: 6px; }
  .order-line-copy strong { font-size: 15px; }
  .order-line-copy span { color: var(--muted); font-size: 13px; }
  .order-line-quantity, .order-line-price { font-weight: 700; }
  .totals { width: min(280px, 100%); justify-self: end; display: grid; gap: 7px; padding-top: 4px; }
  .total-row { display: flex; justify-content: space-between; color: var(--muted); font-size: 14px; }
  .total-row--grand { color: var(--ink); border-top: 1px solid var(--line); margin-top: 5px; padding-top: 12px; font-weight: 900; font-size: 19px; }
  .details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }
  .detail-box { padding: 2px 36px; display: grid; gap: 5px; border-left: 1px solid var(--line); }
  .detail-box:first-child { border-left: 0; }

  .detail-box span,
  .thank-you-copy {
    color: var(--muted);
  }

  .action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .primary-button,
  .ghost-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    padding: 13px 18px;
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
  }

  .primary-button {
    background: var(--ink);
    color: var(--bg);
  }

  .ghost-button {
    background: transparent;
    color: var(--ink);
  }

  .primary-button:hover,
  .primary-button:focus-visible,
  .ghost-button:hover,
  .ghost-button:focus-visible {
    background: var(--ink);
    color: var(--bg);
    outline: none;
  }

  footer {
    padding: 32px 28px;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 14px;
  }

  .footer-block {
    display: grid;
    gap: 10px;
  }

  .footer-kicker {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }

  .footer-mark {
    color: var(--ink);
    font-size: 34px;
    font-weight: 900;
    letter-spacing: -0.1em;
    line-height: 0.9;
  }

  .footer-text,
  .footer-link {
    max-width: 28ch;
    line-height: 1.4;
  }

  .footer-links {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  .footer-link {
    opacity: 0.82;
    transition: opacity 0.22s ease;
  }

  .footer-link:hover,
  .footer-link:focus-visible {
    opacity: 1;
    outline: none;
  }

  @media (max-width: 900px) {
    main,
    header,
    footer {
      padding-inline: 20px;
    }

    .details-grid,
    footer {
      grid-template-columns: 1fr;
    }
    .order-line { grid-template-columns: 104px minmax(0, 1fr) 50px 74px; }
    .order-line img { width: 104px; height: 82px; }
    .detail-box { border-left: 0; border-top: 1px solid var(--line); padding: 12px 0; }
    .detail-box:first-child { border-top: 0; }
  }

  @media (max-width: 720px) {
    main {
      padding-top: 88px;
    }

    .action-row {
      flex-direction: column;
    }

    .primary-button,
    .ghost-button {
      width: 100%;
    }
  }