:root{
      --ink:#111;
      --parchment-1:#f3ead6;
      --parchment-2:#efe1c3;
      --parchment-3:#e7d3aa;
      --edge:#2a241b22;
      --shadow:#00000014;
      --max: 980px;
    }

    /* Parchment background */
    body{
      margin:0;
      color:var(--ink);
      font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
      line-height:1.55;

      background:
        radial-gradient(1200px 900px at 10% 0%, #ffffff40 0%, #ffffff00 60%),
        radial-gradient(900px 700px at 100% 40%, #00000012 0%, #00000000 60%),
        radial-gradient(900px 700px at 30% 90%, #00000010 0%, #00000000 55%),
        repeating-linear-gradient(
          0deg,
          #00000000 0px,
          #00000000 6px,
          #00000007 7px
        ),
        linear-gradient(180deg, var(--parchment-1), var(--parchment-2) 45%, var(--parchment-3));
      background-attachment: fixed;
    }

    /* Fixed header */
    header{
      position:fixed;
      top:0; left:0; right:0;
      z-index:1000;
      backdrop-filter: blur(6px);
      background: linear-gradient(180deg, #f6efdfe6, #f6efdfa6);
      border-bottom: 1px solid var(--edge);
      box-shadow: 0 8px 18px var(--shadow);
    }
    .nav{
      max-width: var(--max);
      margin: 0 auto;
      padding: 10px 18px;
      display:flex;
      align-items:center;
      gap:10px;
      justify-content:flex-end;
    }
    .btn{
      appearance:none;
      border:1px solid #1b1b1b44;
      background:#ffffff55;
      color:var(--ink);
      padding:9px 12px;
      border-radius:999px;
      font-size:14px;
      letter-spacing:.02em;
      text-decoration:none;
      display:inline-block;
      transition: transform .08s ease, background .2s ease, border-color .2s ease;
      white-space:nowrap;
    }
    .btn:hover{
      background:#ffffff80;
      border-color:#1b1b1b66;
      transform: translateY(-1px);
    }
    .btn:active{ transform: translateY(0px); }

    /* Page layout */
    main{
      max-width: var(--max);
      margin: 0 auto;
      padding: 96px 18px 70px; /* top padding accounts for fixed header */
    }
    .hero{
      padding: 30px 0 10px;
    }
    h1{
      font-size: clamp(40px, 6vw, 64px);
      margin: 0 0 10px;
      letter-spacing: .01em;
    }
    .lead{
      font-size: clamp(18px, 2.2vw, 22px);
      margin: 0 0 26px;
      max-width: 65ch;
    }

    section{
      margin: 34px 0;
      padding: 26px 22px;
      border: 1px solid var(--edge);
      border-radius: 18px;
      background: #ffffff30;
      box-shadow: 0 12px 28px var(--shadow);
    }
    h2{
      margin: 0 0 10px;
      font-size: 22px;
      letter-spacing: .02em;
      text-transform: none;
    }
    p{ margin: 0 0 14px; max-width: 75ch; }

    .media{
      margin-top: 14px;
      border-radius: 16px;
      border: 1px solid var(--edge);
      background: #ffffff25;
      overflow:hidden;
    }
    .caption{
      font-size: 13px;
      opacity: .8;
      padding: 10px 12px;
      border-top: 1px solid var(--edge);
    }

    /* Simple “image” placeholders as inline SVG containers */
    .svg-wrap{
      width: 100%;
      aspect-ratio: 16 / 9;
      display:block;
    }

    /* Pillars list */
    .pillars{
      margin: 12px 0 6px;
      padding-left: 18px;
    }
    .pillars li{
      margin: 6px 0;
    }
    .note{
      margin-top: 8px;
      font-style: italic;
      opacity: .92;
    }

    /* Begin section buttons */
    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top: 12px;
    }

    footer{
      max-width: var(--max);
      margin: 0 auto;
      padding: 14px 18px 40px;
      opacity: .75;
      font-size: 13px;
    }

    /* Anchor offset for fixed header */
    .anchor{
      position: relative;
      top: -84px;
      visibility: hidden;
    }