*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --red: #8B1A1A;
      --bg: #FAFAF8;
      --ink: #1A1A1A;
      --mid: #777772;
      --rule: #DDDDD8;
      --dark: #0A0A0A;
      --mobile-nav-bg: rgba(250,250,248,0.98);
      --mobile-nav-text: #8C8C8A;
      --mobile-nav-active: #1A1A1A;
      --mobile-nav-rule: #DDDDD8;
      --mobile-nav-active-rule: #DDDDD8;
    }
    html, body {
      width: 100%;
      min-height: 100%;
      background: var(--bg);
      color: var(--ink);
      font-family: 'Inter', sans-serif;
      font-weight: 300;
      line-height: 1.6;
      overflow-x: hidden;
    }

    nav.site-nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 1.8rem 3.5rem;
      background: rgba(250,250,248,0.97);
      border-bottom: 1px solid var(--rule);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .nav-brand {
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      line-height: 1.2;
      text-transform: uppercase;
      color: var(--ink);
      text-decoration: none;
      opacity: 0.85;
    }
    .nav-links {
      display: flex;
      gap: 2.5rem;
      align-items: center;
      list-style: none;
    }
    .nav-links a {
      font-size: 0.75rem;
      font-weight: 300;
      letter-spacing: 0.18em;
      line-height: 1.2;
      text-transform: uppercase;
      color: var(--mid);
      text-decoration: none;
      transition: color 0.2s;
    }
    .nav-links a:hover, .nav-links a.active { color: var(--ink); }
    .nav-links a.nav-cta {
      color: var(--ink);
      border: 1px solid rgba(26,26,26,0.4);
      padding: 0.4rem 1rem;
      transition: background 0.2s, border-color 0.2s;
    }
    .nav-links a.nav-cta:hover, .nav-links a.nav-cta.active {
      color: var(--white, #FAFAF8);
      background: var(--ink);
      border-color: var(--ink);
    }

    main { padding-top: 5rem; }
    .support-layout {
      display: grid;
      grid-template-columns: minmax(24rem, 0.92fr) minmax(34rem, 1.08fr);
      min-height: calc(100vh - 5rem);
    }
    .support-visual {
      position: sticky;
      top: 5rem;
      height: calc(100vh - 5rem);
      overflow: hidden;
      background: var(--dark);
    }
    .support-visual img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
      display: block;
    }
    .support-visual::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.26), transparent 34%);
      pointer-events: none;
    }
    .visual-credit {
      position: absolute;
      z-index: 1;
      left: 2rem;
      bottom: 1.7rem;
      font-size: 0.58rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.62);
    }

    .support-content {
      padding: 5.5rem clamp(3rem, 6vw, 7.5rem) 6rem;
    }
    .eyebrow {
      margin-bottom: 1.35rem;
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--red);
    }
    h1 {
      max-width: 12ch;
      margin-bottom: 2rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(3.2rem, 5.7vw, 6.6rem);
      font-weight: 300;
      line-height: 0.93;
      letter-spacing: -0.025em;
      color: var(--ink);
    }
    .intro {
      max-width: 39rem;
      margin-bottom: 3.75rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.25rem, 1.8vw, 1.65rem);
      font-weight: 300;
      line-height: 1.55;
      color: #44443F;
    }

    .support-options {
      display: grid;
      gap: 1.3rem;
      max-width: 47rem;
    }
    .support-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 2.2rem;
      align-items: center;
      padding: 2.25rem;
      border: 1px solid var(--rule);
      background: rgba(255,255,255,0.26);
      transition: border-color 0.2s, background 0.2s;
    }
    .support-card:hover {
      border-color: #A8A8A1;
      background: rgba(255,255,255,0.55);
    }
    .card-label {
      margin-bottom: 0.7rem;
      font-size: 0.58rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--red);
    }
    .support-card h2 {
      margin-bottom: 0.7rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 3vw, 2.65rem);
      font-weight: 400;
      line-height: 1.06;
      color: var(--ink);
    }
    .support-card p {
      max-width: 34rem;
      font-size: 0.83rem;
      line-height: 1.75;
      color: #62625D;
    }
    .card-note {
      display: block;
      margin-top: 0.9rem;
      font-size: 0.63rem;
      font-weight: 400;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: #8A8A84;
    }
    .support-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 12.6rem;
      min-height: 3.2rem;
      padding: 0.9rem 1.25rem;
      border: 1px solid var(--ink);
      background: var(--ink);
      color: var(--bg);
      font-size: 0.62rem;
      font-weight: 500;
      letter-spacing: 0.17em;
      line-height: 1.35;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
      transition: background 0.2s, color 0.2s;
    }
    .support-button:hover { background: transparent; color: var(--ink); }
    .disclosure {
      max-width: 47rem;
      margin-top: 2.5rem;
      padding-top: 2rem;
      border-top: 1px solid var(--rule);
    }
    .disclosure p {
      margin-bottom: 0.85rem;
      font-size: 0.72rem;
      line-height: 1.75;
      color: #74746E;
    }
    .disclosure p:last-child { margin-bottom: 0; }
    .disclosure a { color: var(--ink); text-underline-offset: 0.2em; }

    .mobile-nav {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 101;
      width: auto;
      max-width: 100vw;
      height: 3.6rem;
      padding: 0 0.5rem;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: center;
      background: var(--mobile-nav-bg);
      border-top: 0;
      border-bottom: 1px solid var(--mobile-nav-rule);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .mobile-nav a {
      display: flex;
      align-items: center;
      justify-content: center;
      justify-self: center;
      width: calc(100% - 0.5rem);
      height: 2.45rem;
      min-width: 0;
      padding: 0 0.2rem;
      font-family: 'Inter', sans-serif;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.15em;
      line-height: 1;
      text-align: center;
      text-transform: uppercase;
      white-space: nowrap;
      color: var(--mobile-nav-text);
      text-decoration: none;
      border: 1px solid transparent;
      transition: color 0.2s, border-color 0.2s, background 0.2s;
    }
    .mobile-nav a.active-mobile {
      color: var(--mobile-nav-active);
      border-color: var(--mobile-nav-active-rule);
    }
    .mobile-nav a:hover { color: var(--mobile-nav-active); }

    @media (max-width: 1080px) {
      .support-layout { grid-template-columns: 0.85fr 1.15fr; }
      .support-content { padding-right: 3rem; padding-left: 3rem; }
      .support-card { grid-template-columns: 1fr; gap: 1.5rem; }
      .support-button { justify-self: start; }
    }

    @media (max-width: 860px) {
      nav.site-nav { display: none; }
      .mobile-nav { display: grid; }
      main { padding-top: 3.6rem; }
      .support-layout { display: block; min-height: 0; }
      .support-visual {
        position: relative;
        top: 0;
        width: 100%;
        height: min(112vw, 44rem);
      }
      .support-visual img { object-position: center 54%; }
      .visual-credit { left: 1.5rem; bottom: 1.3rem; }
      .support-content { padding: 4rem 2rem 7rem; }
      h1 { max-width: 10ch; }
      .intro { margin-bottom: 3rem; }
      .support-card { padding: 1.8rem; }
    }

    @media (max-width: 480px) {
      .support-content { padding-right: 1.35rem; padding-left: 1.35rem; }
      .support-card { padding: 1.5rem; }
      .support-button { width: 100%; }
      .card-note { line-height: 1.6; }
    }


    .closing-invitation {
      max-width: 39rem;
      margin-top: 3.25rem;
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.25rem, 1.9vw, 1.65rem);
      font-weight: 300;
      line-height: 1.55;
      color: #44443F;
    }
