@layer pages {
.mk-index { margin-block-end: var(--space-3); }
.mk-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 3; margin-inline: calc(-1 * var(--gutter)); background: var(--surface-sunken); }
  .mk-photo img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
  .mk-photo img { filter: var(--photo-grade); }
  .mk-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--photo-veil); pointer-events: none; }
  .mk-photo::after { content: ""; position: absolute; inset: var(--space-3); z-index: 1; border: var(--photo-rule); pointer-events: none; }
  .mk-lead + .chapter-row__body { margin-block-start: var(--space-3); }
  .mk-row:has(+ .mk-photo--band) { padding-block-end: var(--space-7); }
  .mk-photo--band { margin-block-end: clamp(3.5rem, 1.5rem + 5vw, 7.5rem); }
  @media (min-width: 768px) {
    .mk-photo { margin-inline: 0; }
    .mk-photo--band { aspect-ratio: auto; block-size: min(42vw, 70svh, 36rem); }
  }
  @media (min-width: 1024px) {
    .mk-row:has(> .mk-lead) > .chapter-row__head { grid-row: span 2; }
    .mk-lead + .chapter-row__body { margin-block-start: 0; }
    .mk-photo--lead { aspect-ratio: auto; block-size: min(30vw, 62svh); }
  }
.mk-example { position: relative; max-inline-size: 40em; padding: calc(var(--space-5) + 2.25rem) var(--space-5) var(--space-5); border-inline-start: 2px solid var(--accent); background: linear-gradient(180deg, var(--surface-raised), var(--surface) 140%); }
  .mk-example::before, .mk-example::after { content: ""; position: absolute; inset-block-start: var(--space-5); inset-inline-start: var(--space-5); inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid var(--accent); border-radius: 50%; }
  .mk-example::after { inset-inline-start: calc(var(--space-5) + .875rem); }
  .mk-example p { font-size: var(--step-2); line-height: 1.6; color: var(--fg); text-wrap: pretty; }
.mk-steps { display: grid; gap: var(--space-6); max-inline-size: 40em; }
  .mk-steps > li { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-2) var(--space-4); }
  .mk-steps > li > :not(.mk-steps__n) { grid-column: 2; }
  .mk-steps__n { grid-row: span 2; display: grid; place-items: center; block-size: 2.75rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--surface);
    font-size: var(--step--1); font-weight: var(--weight-semibold); letter-spacing: .08em; color: var(--label-hi); }
  .mk-steps > li:not(:last-child)::before { content: ""; position: absolute; inset-block: 2.75rem calc(-1 * var(--space-6)); inset-inline-start: calc(1.375rem - .5px); inline-size: 1px; background: var(--accent); transform-origin: 50% 0; }
  .mk-steps__title, .mk-terms dt { font-family: var(--heading-family); font-weight: var(--heading-weight); font-size: 1.5rem; line-height: 1.2; letter-spacing: var(--heading-track); text-wrap: balance; }
  .mk-steps__title { padding-block-start: .5rem; }
  .mk-steps p, .mk-terms dd { font-size: 1rem; line-height: 1.65; color: var(--fg); text-wrap: pretty; }
.mk-terms > div { display: grid; gap: var(--space-2) var(--grid-gap); padding-block: var(--space-4); }
  .mk-terms > div + div { border-block-start: 1px solid var(--rule); }
  .mk-terms > :first-child { padding-block-start: 0; }
  @media (min-width: 600px) { .mk-terms > div { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: baseline; } }
.mk-notices { display: grid; gap: var(--space-3); margin-block-end: var(--space-6); }
  .mk-notices p { max-inline-size: 46em; padding-inline-start: var(--space-4); border-inline-start: 2px solid var(--accent); font-size: .9375rem; line-height: 1.6; color: var(--fg); text-wrap: pretty; }
  .mk-notices + .risks > .risk:first-child { padding-block-start: var(--space-5); }
  .mk-notices + .risks > .risk:first-child::before { content: ""; }
@media screen {
:root.mt[data-motion-ready] :is(.mk-steps, .mk-terms)[data-m]:not([data-in]) > * > * { opacity: 0; translate: 0 10px; }
    :root.mt :is(.mk-steps, .mk-terms)[data-m][data-in=""] > * > * { transition: opacity 520ms var(--ease-reveal) calc(var(--i, 0) * 140ms + 80ms), translate 720ms var(--ease-reveal) calc(var(--i, 0) * 140ms + 80ms); }
    :root.mt[data-motion-ready] .mk-steps[data-m]:not([data-in]) > li::before { transform: scaleY(0); }
    :root.mt .mk-steps[data-m][data-in=""] > li::before { transition: transform 640ms var(--ease-cut) calc(var(--i, 0) * 140ms + 320ms); }
:root.mt[data-motion-ready] .mk-photo[data-m]:not([data-in]) img { opacity: 0; transform: scale(1.06); }
    :root.mt .mk-photo[data-m][data-in=""] img { transition: opacity 900ms var(--ease-reveal), transform 1600ms var(--ease-reveal); }
  }
}