/* ========== TOKENS ========== */
  :root{
    --bg:        #F7F5F1;
    --bg-2:      #EFECE5;
    --ink:       #0F1419;
    --ink-soft:  #1F2429;
    --muted:     #6B6660;
    --accent:    #1F3D2E;
    --hair:      #D9D5CC;
    --serif: "Fraunces", "GT Sectra", Georgia, "Times New Roman", serif;
    --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --gutter: clamp(24px, 5vw, 96px);
    --rhythm: clamp(80px, 14vw, 180px);
    --rhythm-sm: clamp(48px, 8vw, 96px);
    --prose-max: 720px;
    --wide-max: 1200px;
  }

  /* Tweakable defaults — edits land here */
  

  *,*::before,*::after{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 18px;
    line-height: 1.58;
    font-feature-settings: "kern","ss01";
    overflow-x: hidden;
  }

  /* Optional paper texture (3-5% opacity) */
  body::before{
    content:"";
    position: fixed; inset:0;
    pointer-events:none;
    opacity: .04;
    z-index: 1;
    background-image:
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.08 0 0 0 0 0.10 0 0 0 0.7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
  }
  body[data-texture="off"]::before{ display:none; }

  /* ========== LINKS ========== */
  a{ color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s ease; }
  a:hover{ color: var(--accent); }
  a.nolink{ text-decoration: none; }

  /* ========== TYPOGRAPHY ========== */
  .serif{ font-family: var(--serif); font-variation-settings: "opsz" 96, "SOFT" 50; font-weight: 400; letter-spacing: -0.012em; }
  .label{
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .hero-text{
    font-family: var(--serif);
    font-variation-settings: "opsz" 144, "SOFT" 100;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.04;
    font-size: clamp(44px, 8.2vw, 88px);
    color: var(--ink);
    max-width: 14ch;
    margin: 0;
    text-wrap: balance;
  }
  .hero-text--short{ max-width: 18ch; }
  .hero-text--mid{ max-width: 16ch; }
  .h2{
    font-family: var(--serif);
    font-variation-settings: "opsz" 72, "SOFT" 50;
    font-weight: 400;
    font-size: clamp(28px, 4.2vw, 44px);
    line-height: 1.12;
    letter-spacing: -0.012em;
    margin: 0 0 28px 0;
    text-wrap: balance;
  }
  .h3{
    font-family: var(--serif);
    font-style: italic;
    font-variation-settings: "opsz" 36, "SOFT" 50;
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: 1.2;
    margin: 0 0 16px 0;
    color: var(--ink);
    letter-spacing: -0.006em;
  }
  p{ margin: 0 0 20px 0; max-width: 65ch; }
  p:last-child{ margin-bottom: 0; }
  .lede{ font-size: clamp(18px, 1.4vw, 20px); color: var(--ink); }
  .muted{ color: var(--muted); }

  /* ========== LAYOUT ========== */
  .shell{ position: relative; z-index: 2; }
  .wrap{
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--gutter);
  }
  .prose{ max-width: var(--prose-max); }
  .wide{ max-width: var(--wide-max); }

  /* ========== TOP BAR ========== */
  .top{
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease, background .2s ease;
  }
  .top.is-scrolled{ border-bottom-color: var(--hair); }
  .top-inner{
    display:flex; align-items:center; justify-content:space-between;
    height: 72px;
    padding: 0 var(--gutter);
    max-width: 1320px; margin: 0 auto;
  }
  .wordmark{
    font-family: var(--serif);
    font-variation-settings: "opsz" 36, "SOFT" 50;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-decoration: none;
  }
  .wordmark:hover{ color: var(--ink); }
  nav.primary{
    display: flex; gap: 44px; align-items: center;
  }
  nav.primary a{
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    position: relative;
    padding: 4px 0;
  }
  nav.primary a[aria-current="page"]{ color: var(--accent); }
  nav.primary a[aria-current="page"]::after{
    content:""; position:absolute; left:0; right:0; bottom:-2px;
    height:1px; background: var(--accent);
  }
  .menu-toggle{
    display:none;
    background:none; border:none; padding:4px 0;
    font: 500 12px/1 var(--sans);
    letter-spacing: .15em; text-transform: uppercase;
    color: var(--ink); cursor:pointer;
  }

  /* ========== PAGES ========== */
  .page{ display: none; opacity: 0; }
  .page.is-active{ display: block; animation: fadeIn .32s ease forwards; }
  @keyframes fadeIn{
    from{ opacity: 0; transform: translateY(4px); }
    to{ opacity: 1; transform: none; }
  }

  /* Reveal on scroll */
  .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; transition-delay: var(--rd, 80ms); }
  .reveal.in{ opacity: 1; transform: none; }

  /* ========== HERO ========== */
  .hero{
    min-height: calc(100svh - 72px);
    display: flex; flex-direction: column;
    justify-content: center;
    padding-top: clamp(40px, 8vw, 80px);
    padding-bottom: clamp(40px, 8vw, 80px);
  }
  .hero.short{ min-height: auto; padding-top: clamp(96px, 14vw, 180px); padding-bottom: clamp(48px, 8vw, 96px); }
  .hero .eyebrow{ margin-bottom: 32px; }
  .hero .hero-claim{
    margin-top: clamp(28px, 3.4vw, 44px);
    max-width: 22ch;
    font-family: var(--serif);
    font-variation-settings: "opsz" 72, "SOFT" 80;
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.22;
    letter-spacing: -0.012em;
    color: var(--ink);
    text-wrap: balance;
  }
  .hero .hero-claim em{
    font-style: italic;
    font-variation-settings: "opsz" 72, "SOFT" 100;
    color: var(--accent);
  }
  .hero .subhead{
    margin-top: 28px;
    max-width: 520px;
    font-size: clamp(15px, 1.05vw, 16px);
    line-height: 1.6;
    letter-spacing: .005em;
  }
  .hero .subhead.muted{ color: var(--muted); }

  /* ========== SECTIONS ========== */
  section.band{ padding: var(--rhythm) 0; }
  section.band--tight{ padding: var(--rhythm-sm) 0; }
  section.band--alt{ background: var(--bg-2); }
  .band-head{ margin-bottom: 40px; }
  .band-head .label{ display:block; margin-bottom: 20px; }

  /* Numbered chapters on Home */
  .chapter{
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 48px;
    padding-top: 48px;
    border-top: 1px solid var(--hair);
  }
  .chapter + .chapter{ margin-top: clamp(60px, 8vw, 96px); }
  .chapter .meta .label{ display:block; margin-bottom: 10px; }
  .chapter .meta .num{
    font-family: var(--serif);
    font-variation-settings: "opsz" 36, "SOFT" 50;
    font-size: 22px; color: var(--muted);
    font-feature-settings: "tnum";
  }
  .chapter h2{ margin-top: 0; }

  /* Two-column (Approach) */
  .cols2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
  }
  .cols2 .col{ max-width: 480px; }
  .cols2 .col .kvs{ margin-top: 20px; }
  .kvs{ display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; color: var(--muted); }
  .kvs dt{ letter-spacing: .15em; text-transform: uppercase; font-size: 11px; padding-top: 2px; }
  .kvs dd{ margin: 0; color: var(--ink); }

  /* Bulleted list */
  .bullets{ list-style: none; margin: 0; padding: 0; max-width: 680px; }
  .bullets li{
    padding: 20px 0;
    border-top: 1px solid var(--hair);
    display: grid; grid-template-columns: 36px 1fr; gap: 12px;
    font-size: 18px;
  }
  .bullets li:last-child{ border-bottom: 1px solid var(--hair); }
  .bullets li::before{
    content: counter(b, decimal-leading-zero);
    counter-increment: b;
    font-family: var(--serif); color: var(--muted);
    font-size: 14px; letter-spacing: .06em;
    padding-top: 3px;
  }
  .bullets{ counter-reset: b; }

  /* Divider */
  .rule{ border: 0; height: 1px; background: var(--hair); margin: clamp(64px, 9vw, 120px) 0; }

  /* ========== CTA / Buttons ========== */
  .btn{
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink); color: var(--bg);
    font: 500 14px/1 var(--sans);
    letter-spacing: 0.05em;
    padding: 16px 32px;
    border: 0; border-radius: 2px;
    cursor: pointer; text-decoration: none;
    transition: background .2s ease, color .2s ease;
  }
  .btn:hover{ background: var(--ink-soft); color: var(--bg); }
  .btn[disabled]{ opacity: .6; cursor: default; }

  .link-u{
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
    font-weight: 500;
  }

  .cta-block{
    margin-top: clamp(48px, 7vw, 96px);
  }
  .cta-block .lede{
    font-family: var(--serif); font-style: italic;
    font-variation-settings: "opsz" 72, "SOFT" 80;
    font-size: clamp(26px, 3.2vw, 36px);
    line-height: 1.2;
    margin: 0 0 28px 0;
    color: var(--ink);
    letter-spacing: -0.01em;
    max-width: 22ch;
    text-wrap: balance;
  }

  /* ========== FORMS ========== */
  form.aroha{ display: grid; gap: 32px; max-width: 560px; }
  form.aroha .row{ display: grid; gap: 32px; }
  form.aroha .row.two{ grid-template-columns: 1fr 1fr; }
  .field{ display: grid; gap: 8px; }
  .field label{
    font-size: 12px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; color: var(--muted);
  }
  .field .req{ color: var(--accent); }
  .field input, .field select, .field textarea{
    font: 400 17px/1.5 var(--sans);
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--hair);
    padding: 12px 0;
    outline: none;
    width: 100%;
    transition: border-color .2s ease;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .field textarea{ resize: vertical; min-height: 120px; }
  .field select{
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' stroke='%236B6660' stroke-width='1.2' fill='none'/></svg>");
    background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px;
  }
  .field input:focus, .field select:focus, .field textarea:focus{
    border-color: var(--accent);
  }
  .field .help{ font-size: 12px; color: var(--muted); }
  .form-foot{ display: flex; align-items: center; gap: 20px; margin-top: 8px; }
  .confirm{
    padding: 32px 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
    font-family: var(--serif); font-style: italic;
    font-size: clamp(20px, 2.2vw, 26px);
    color: var(--ink);
    max-width: 42ch;
    display: none;
  }
  .confirm.show{ display: block; animation: fadeIn .32s ease; }

  /* ========== FOOTER ========== */
  footer.site{
    border-top: 1px solid var(--hair);
    padding: 28px 0;
    font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
  }
  footer.site .foot-inner{
    display: flex; justify-content: center; align-items: center; gap: 16px;
    flex-wrap: wrap;
    text-align: center;
  }
  footer.site a{ color: var(--muted); text-decoration: none; }
  footer.site a:hover{ color: var(--accent); }

  /* ========== 404 ========== */
  .err{
    min-height: calc(100svh - 72px - 72px);
    display: grid; place-items: center; text-align: center;
  }
  .err .big{
    font-family: var(--serif); font-style: italic;
    font-size: clamp(32px, 5vw, 56px);
    line-height: 1.15; margin: 0 0 24px 0; color: var(--ink);
    letter-spacing: -0.012em;
    font-variation-settings: "opsz" 144, "SOFT" 100;
  }

  /* ========== RESPONSIVE ========== */
  @media (max-width: 860px){
    nav.primary{ display: none; }
    nav.primary.open{
      display: flex; position: absolute; top: 72px; left: 0; right: 0;
      flex-direction: column; align-items: flex-start; gap: 20px;
      padding: 24px var(--gutter);
      background: var(--bg); border-bottom: 1px solid var(--hair);
    }
    .menu-toggle{ display: inline-block; }
    .chapter{ grid-template-columns: 1fr; gap: 20px; }
    .cols2{ grid-template-columns: 1fr; }
    form.aroha .row.two{ grid-template-columns: 1fr; }
  }

  @media (max-width: 520px){
    body{ font-size: 17px; }
  }

  /* Layout density tweak */
  body[data-density="airy"]{ --rhythm: clamp(120px, 18vw, 220px); }
  body[data-density="compact"]{ --rhythm: clamp(60px, 10vw, 120px); }

  /* Subtle selection */
  ::selection{ background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--ink); }

  /* ========== SKIP LINK ========== */
  .skip-link{
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--ink);
    color: var(--bg);
    font: 500 14px/1 var(--sans);
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    transition: top .2s ease;
  }
  .skip-link:focus{ top: 0; color: var(--bg); }

  /* ========== REDUCED MOTION ========== */
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after{
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
    .reveal{ opacity: 1; transform: none; }
  }