@layer prototype {
  :root {
    --igzm-green: #689d29;
    --igzm-green-hover: #83b744;
    --igzm-ink: #15251c;
    --igzm-fir: #153b28;
    --igzm-citron: #e0f184;
    --igzm-paper: #f7f6ef;
    --igzm-masthead: #10281c;
    --igzm-masthead-muted: #cbdcc9;
    --font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
    --font-body: 'Manrope', system-ui, sans-serif;
    --container: 76rem;
    --radius: .625rem;
  }

  :root:not([data-theme="dark"]) {
    --color-surface-page: var(--igzm-paper);
    --color-surface-card: #fff;
    --color-surface-subtle: #e9eedc;
    --color-text-primary: var(--igzm-ink);
    --color-text-secondary: #40584a;
    --color-action-hover: var(--igzm-fir);
    --color-border: #bdcdbb;
    --color-focus: #365c00;
    --color-community-surface: #eee7f7;
  }

  :root[data-theme="dark"] {
    --color-surface-page: #111d17;
    --color-surface-card: #1b2b21;
    --color-surface-subtle: #233629;
    --color-text-primary: #f2f5e8;
    --color-text-secondary: #bdd1c0;
    --color-action-hover: var(--igzm-citron);
    --color-border: #526b58;
    --color-focus: var(--igzm-citron);
    --color-community-surface: #30293a;
  }

  :root:not([data-theme="dark"]), :root[data-theme="dark"] {
    --color-action-primary: var(--igzm-green);
    --color-action-text: var(--igzm-ink);
    --color-surface-inverse: var(--igzm-masthead);
    --color-text-inverse: var(--igzm-paper);
    --color-text-inverse-muted: var(--igzm-masthead-muted);
  }

  body { font-family: var(--font-body); }
  ::selection { background: var(--color-action-primary); color: var(--color-action-text); }
  .l-container { width: min(100% - clamp(2rem, 6vw, 5rem), var(--container)); }
  :where(.p-membership) :is(h1, h2) { font-family: var(--font-heading); font-weight: 740; letter-spacing: -.035em; }
  :where(.p-membership) h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.25rem); }
  .p-link { display: inline-flex; gap: .55rem; min-height: 2.75rem; align-items: center; font-weight: 700; }
  .p-link svg, .c-button svg, .c-menu-toggle svg { flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .c-button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: var(--radius); text-align: center; text-decoration: none; font: inherit; font-weight: 800; }
  .c-button:hover { background-color: var(--igzm-green-hover); }

  .c-site-header { background: var(--color-surface-page); }
  .c-site-header__inner { min-height: 4.5rem; padding-block: .6rem; gap: .5rem; }
  .c-site-brand { gap: .5rem; color: var(--color-text-primary); flex-shrink: 1; min-width: 0; }
  .c-site-brand__logo { width: 2.5rem; height: 2.5rem; }
  .c-site-brand__logo.c-brand-image--library { width: clamp(8rem, 42vw, 12rem); height: auto; padding: .24rem; border-radius: .3rem; background: var(--igzm-paper); }
  .c-site-brand__name { border: 0; padding: 0; font-size: .7rem; font-weight: 700; }
  .c-menu-toggle { gap: .4rem; padding-inline: .55rem; border-radius: var(--radius); font-family: var(--font-body); }
  .c-theme-toggle { min-width: 2.75rem; justify-content: center; padding: .35rem; }
  .c-theme-toggle__track { display: none; }
  .c-theme-toggle[aria-checked="false"] .c-theme-toggle__icon--sun,
  .c-theme-toggle[aria-checked="true"] .c-theme-toggle__icon--moon { display: none; }
  .c-theme-toggle__icon { opacity: 1; }
  .c-site-header nav a[aria-current="true"] { text-decoration: underline; }

  .p-page-intro > p { color: var(--color-text-secondary); font-size: clamp(1rem, 1.55vw, 1.2rem); line-height: 1.55; max-width: 37rem; margin: 1.15rem 0 0; }

  .p-page-intro { padding-block: clamp(2.2rem, 6vw, 4.75rem) clamp(1.8rem, 4vw, 3rem); border-bottom: 1px solid var(--color-border); }
  .p-page-intro h1 { font-size: clamp(2.8rem, 8.2vw, 4.5rem); margin: 0; }
  .p-page-index { display: flex; flex-wrap: wrap; gap: .05rem 1.25rem; margin-top: 1rem; }
  .p-page-index a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 700; }
  .p-membership-layout { display: grid; align-items: start; gap: 2rem 4rem; padding-block: 2rem; }
  .p-membership-main { min-width: 0; }
  .p-content-section { scroll-margin-top: 1rem; }
  .p-content-section + .p-content-section { border-top: 1px solid var(--color-border); margin-top: 2.25rem; padding-top: 2rem; }
  .p-joining-steps { list-style: none; padding: 0; margin: 1.45rem 0 0; counter-reset: joining-step; }
  .p-joining-steps li { position: relative; padding: 1rem 0 1rem 3.1rem; border-top: 1px solid var(--color-border); counter-increment: joining-step; }
  .p-joining-steps li::before { content: counter(joining-step, decimal-leading-zero); position: absolute; left: 0; top: 1.05rem; font-size: .95rem; font-weight: 700; color: var(--color-action-hover); font-variant-numeric: tabular-nums; }
  .p-joining-steps h3 { font-size: 1.13rem; margin: 0 0 .4rem; }
  .p-joining-steps p { margin: 0; color: var(--color-text-secondary); }
  .p-membership-contact { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-border); background: var(--color-surface-subtle); scroll-margin-top: 1rem; }
  .p-membership-contact h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
  .p-membership-contact p { margin-block: .65rem 1rem; }
  .p-contact-phone { display: flex; width: fit-content; min-height: 2.75rem; align-items: center; margin-top: .25rem; font-weight: 700; }
  .p-membership-more { border-top: 1px solid var(--color-border); padding-block: 1.5rem .5rem; }
  .p-membership-more h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
  .p-membership-more a { margin-top: .45rem; }

  .c-site-footer { padding-block: 2rem; }
  .c-site-footer :focus-visible { outline-color: var(--color-text-inverse); }
  @media (min-width: 44.01rem) {
    .c-site-header__inner { min-height: 5rem; gap: 1.2rem; }
    .c-site-brand__logo { width: 3rem; height: 3rem; }
    .c-site-brand__name { font-size: .78rem; }
  }

  @media (min-width: 54rem) {
    .p-membership-layout { grid-template-columns: minmax(0, 1fr) minmax(15rem, .42fr); }
    .c-theme-control { order: 4; margin-left: 0; }
  }

  @media (forced-colors: active) {
    .c-button { border: 1px solid ButtonText; }
  }
}