.wrap { box-sizing: border-box; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 calc(var(--gutter) * var(--spacing)); }

  * { box-sizing: border-box; }
  h2, h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 600; }
  h2 { font-size: calc(var(--text-h2) * var(--type-scale)); max-width: 44rem; }
  h3 { font-size: calc(var(--text-h3) * var(--type-scale)); line-height: 1.3; }
  p { max-width: 55ch; color: var(--body); font-size: calc(var(--text-lg) * var(--type-scale)); }
  p, li { overflow-wrap: anywhere; }
  a { color: var(--green-deep); text-underline-offset: 3px; }
  strong { color: var(--ink); }
  code { font-family: var(--font-mono); font-size: .9em; background: var(--soft); color: var(--ink); padding: .12em .4em; border-radius: calc(var(--r-sm) * 0.375); }

    :host { display: block; }
    h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    ul { list-style: none; margin: 0; padding: calc(clamp(2.5rem, 6vw, 4.5rem) * var(--spacing)) 0; display: grid; gap: calc(var(--space-6) * var(--spacing)) calc(var(--space-8) * var(--spacing));
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
    li { color: var(--body); line-height: 1.5; font-size: calc(var(--text-base) * var(--type-scale)); }
    li strong { display: block; font-family: var(--font-display); color: var(--green-deep); font-size: calc(clamp(1.4rem, 1.9vw, 1.75rem) * var(--type-scale));
      font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: calc(.35rem * var(--spacing)); }
    @media (max-width: 600px) { ul { grid-template-columns: 1fr; gap: calc(1.1rem * var(--spacing)); } li strong { font-size: calc(2rem * var(--type-scale)); } }
    :host([variant=tiles]) li { background: var(--tint); padding: 1.5rem; border-radius: var(--r-sm); }
    :host([variant=list]) ul { grid-template-columns: 1fr; }
    :host([variant=list]) li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--line); }