/* Generated from src/patterns/ by build/build.mjs — do not edit. */

/* ---- shell.css ---- */
/* hd-shell — centred page container. The side gutter is fluid (20px on phones,
   40px on wide screens) and sits outside the content width, so text never touches
   the viewport edge and a border on the shell spans exactly the text column.
   --wide is the website's editorial width, --narrow a single column for forms and
   reading; the default suits applications. */
.hd-shell {
  width: min(var(--hd-container-content), 100% - 2 * var(--hd-container-gutter));
  margin-inline: auto;
}

.hd-shell--wide {
  width: min(var(--hd-container-wide), 100% - 2 * var(--hd-container-gutter));
}

.hd-shell--narrow {
  width: min(var(--hd-container-narrow), 100% - 2 * var(--hd-container-gutter));
}

/* ---- skip-link.css ---- */
/* hd-skip-link — first focusable element on the page; visible on focus only.
   Point it at the main landmark. */
.hd-skip-link {
  position: absolute;
  inset-inline-start: var(--hd-space-4);
  top: -100%;
  z-index: var(--hd-z-toast);
  padding: var(--hd-space-2) var(--hd-space-4);
  border-radius: var(--hd-radius-medium);
  background: var(--hd-color-accent);
  color: var(--hd-color-on-accent);
  font-weight: var(--hd-font-weight-semibold);
  text-decoration: none;
}

.hd-skip-link:focus {
  top: var(--hd-space-4);
  outline: var(--hd-focus-width) solid var(--hd-color-focus);
  outline-offset: var(--hd-focus-offset);
}

/* ---- eyebrow.css ---- */
/* hd-eyebrow — small uppercase label above a heading (section number,
   category). Sits at the caption size; nothing on a page is smaller. */
.hd-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--hd-space-2);
  margin: 0 0 var(--hd-space-2);
  color: var(--hd-color-text-muted);
  font-size: var(--hd-font-size-caption);
  font-weight: var(--hd-font-weight-semibold);
  letter-spacing: var(--hd-letter-spacing-wide);
  text-transform: uppercase;
}

/* ---- section-heading.css ---- */
/* hd-section-heading — eyebrow, heading and intro paragraph at the top of a
   section, with the reading measure applied. */
.hd-section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--hd-space-2);
  max-width: var(--hd-measure-wide);
  margin: 0 0 var(--hd-space-6);
}

.hd-section-heading > :where(h1, h2, h3) {
  margin: 0;
  font-weight: var(--hd-font-weight-semibold);
  line-height: var(--hd-line-height-heading);
  letter-spacing: var(--hd-letter-spacing-tight);
}

/* A section title is a page-level step (display); a sub-section is one down. */
.hd-section-heading > :where(h1, h2) {
  font-size: var(--hd-font-size-display);
}

.hd-section-heading > :where(h3) {
  font-size: var(--hd-font-size-heading-large);
}

.hd-section-heading__intro {
  margin: 0;
  max-width: var(--hd-measure-prose);
  color: var(--hd-color-text-muted);
  font-size: var(--hd-font-size-lead);
}