/* Boundaries guide geometry; typography inherits the shared site roles. */
.boundaries-guide :is(h2, h3) { scroll-margin-top: 7rem; }
.boundary-contents { border-block: 1px solid var(--border-soft); padding-block: 1.5rem; margin-bottom: 3rem; }
.boundaries-guide .boundary-contents h2 { font: var(--type-ui); font-weight: 600; margin: 0 0 1rem; }
.boundary-contents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.boundary-contents a { display: inline-block; padding-block: .3rem; font: var(--type-ui); text-decoration: underline; text-underline-offset: .2em; }
.boundary-body > h2 { margin: 3rem 0 1.25rem; }
.boundary-body > h3 { margin: 2.5rem 0 1rem; }
.boundary-body > ul { padding-left: 1.35em; }
.boundary-body li + li { margin-top: 1rem; }
.boundary-insert { margin: 2.5rem 0; padding: 1.5rem 0 0; border-top: 1px solid var(--text-muted); }
.boundaries-guide .boundary-insert h3 { font: var(--type-reading-body); font-weight: 600; margin: 0 0 1rem; }
.boundary-insert p:last-child { margin-bottom: 0; }
.boundary-insert--preparation ul { list-style: none; padding: 0; margin: 0; }
.boundary-insert--preparation li { padding-block: .25rem; }
.boundary-insert--safety { border: 2px solid var(--text-primary); padding: clamp(1.25rem, 4vw, 2rem); }
.boundary-related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--text-muted); }
.boundary-related ul { list-style: none; padding: 0; }
.boundary-related li { margin: 1.5rem 0; }
.boundary-related li > a { font-weight: 600; }
.boundary-related li p { margin: .4rem 0 0; }
@media (max-width: 600px) {
  .boundary-contents ul { display: block; }
  .boundary-contents a { padding-block: .6rem; }
}

/* The photograph stays unfiltered; the title reads on the page above it. */
.boundary-hero-copy { width: min(calc(100% - 2 * var(--gutter-system)), var(--content-reading)); margin: 0 auto; padding: 3rem 0 2.5rem; }
.boundary-hero h1 { margin: .75rem 0 1rem; }
.boundary-hero-sub { font: var(--type-lede); max-width: 48ch; margin: 0; }
.boundary-hero > img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center top; }

/* A single tinted editorial insert, distinct from the surrounding prose. */
.page-boundaries { --boundary-teal: #315f60; --boundary-rule: #aec5c0; }
.boundary-insert--preparation {
  background: #e3eeea;
  border-top: 2px solid var(--boundary-teal);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-block: 3rem;
}
.boundaries-guide .boundary-insert--preparation h3 {
  font: var(--type-chapter);
  max-width: 22ch;
  color: var(--boundary-teal);
  margin: 0 0 1.5rem;
}
.boundary-insert--preparation ul { counter-reset: question; }
.boundary-insert--preparation li {
  counter-increment: question;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--boundary-rule);
  font: var(--type-reading-body);
}
.boundary-insert--preparation li + li { margin-top: 0; }
.boundary-insert--preparation li:last-child { padding-bottom: 0; }
.boundary-insert--preparation li::before {
  content: counter(question, decimal-leading-zero);
  font: var(--type-small);
  color: var(--boundary-teal);
  padding-top: .15rem;
}
@media (max-width: 600px) {
  .boundary-hero-copy { padding-block: 2rem; }
  .boundary-insert--preparation li { gap: .65rem; }
}

/* The insert itself is the click target; keyboard focus outlines that same area. */
.boundary-insert--expandable { cursor: zoom-in; }
.boundary-insert--expandable:has(.boundary-open:focus-visible) { outline: 2px solid var(--boundary-teal); outline-offset: 5px; }
.boundary-dialog { padding: 0; width: min(960px, calc(100vw - 4rem)); max-width: none; max-height: calc(100dvh - 4rem); border: 1px solid var(--boundary-rule); background: var(--surface, #faf9f5); color: var(--text-primary); margin: auto; overscroll-behavior: contain; }
.boundary-dialog::backdrop { background: rgb(25 39 37 / .5); }
.boundary-dialog-toolbar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; padding: .5rem 1.5rem; border-bottom: 1px solid var(--border-soft); background: var(--surface, #faf9f5); }
.boundary-close { font: var(--type-small); color: var(--boundary-teal); background: transparent; border: 0; cursor: pointer; min-height: 44px; padding: .6rem .5rem; text-decoration: underline; text-underline-offset: .25em; }
.boundary-close:focus-visible { outline: 2px solid var(--boundary-teal); outline-offset: 3px; }
.boundary-dialog-content { padding: clamp(1rem, 4vw, 2.5rem); }
.boundary-dialog .boundary-insert { margin: 0; }
.boundary-dialog .boundary-insert h3 { font: var(--type-chapter); margin: 0 0 1.5rem; }
.boundary-dialog .boundary-insert--preparation h3 { color: var(--boundary-teal); }
.boundary-dialog .boundary-insert :is(li, p) { font-size: 24px; line-height: 1.6; }
@media (max-width: 600px) {
  .boundary-dialog { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; margin: 0; }
  .boundary-dialog-toolbar { padding-top: max(.5rem, env(safe-area-inset-top)); }
  .boundary-dialog-content { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  .boundary-dialog .boundary-insert { padding: 1.25rem; }
  .boundary-dialog .boundary-insert :is(li, p) { font-size: 22px; }
}