@layer sections {
  .recruitment-preview { margin-block: var(--s-5) 0; padding: var(--s-4) var(--s-5); background: var(--accent-tint); color: var(--ink); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-body); }
  .recruitment-hero, .page-volunteer-thanks .page-hero { padding-block-start: clamp(var(--s-6), 5vw, var(--s-8)); }
  .recruitment-caption { margin-block-start: var(--s-6); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2); }
  .recruitment-jumps { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-block-start: var(--s-5); padding-block-start: var(--s-4); border-block-start: 1px solid var(--rule); font-size: var(--fs-sm); }
  .recruitment-jumps a { min-block-size: 2.75rem; display: inline-flex; align-items: center; text-underline-offset: 0.25em; }
  .recruitment-calendar { padding: var(--s-6); border-radius: var(--r-xl); background: var(--paper-sunk); }
  .recruitment-calendar .eyebrow { margin-block-end: var(--s-4); }
  .recruitment-calendar { justify-items: stretch; }
  .recruitment-calendar .spec-list { inline-size: 100%; }
  .recruitment-calendar .spec-list > div { grid-template-columns: minmax(0, 1fr); }
  .recruitment-calendar .spec-list > div:last-child { border-block-end: 0; padding-block-end: 0; }
  .page-volunteer-thanks .page-hero__aside { inline-size: 100%; justify-items: stretch; padding: var(--s-6); background: var(--paper-sunk); border-radius: var(--r-xl); }
  .page-volunteer-thanks .page-hero__aside .spec-list > div { grid-template-columns: minmax(0, 1fr); }
  .recruitment-split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
  .recruitment-split > :first-child { grid-column: 1 / span 4; }
  .recruitment-split > :last-child { grid-column: 5 / span 8; min-inline-size: 0; }
  .recruitment-split h2 { margin-block: var(--s-5); }
  .recruitment-prose { max-inline-size: var(--measure); font-size: var(--fs-lg); }
  .recruitment-prose p + p { margin-block-start: var(--s-5); }
  .recruitment-prose ul { padding-inline-start: var(--s-5); margin-block: var(--s-5); }
  .recruitment-prose li { margin-block: var(--s-3); }
  .recruitment-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .recruitment-track { position: relative; display: flex; flex-direction: column; align-items: start; padding: clamp(1.5rem, 3vw, 3rem); border-radius: var(--r-xl); background: var(--paper-sunk); overflow: hidden; }
  .recruitment-track .btn { margin-block-start: auto; }
  .recruitment-track--core { background: var(--accent-tint); }
  .recruitment-track h3 { margin-block: var(--s-5); }
  .recruitment-track p { max-inline-size: 47ch; margin-block-end: var(--s-5); }
  .recruitment-track .eyebrow { max-inline-size: 75%; }
  .recruitment-track__index { position: absolute; inset-block-start: var(--s-5); inset-inline-end: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-2xl); color: var(--ink-3); }
  .recruitment-note { margin-block-start: var(--s-5); max-inline-size: var(--measure); color: var(--ink-2); font-size: var(--fs-sm); }
  .recruitment-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
  .recruitment-role { display: flex; flex-direction: column; padding: clamp(var(--s-5), 3vw, var(--s-6)); border-radius: var(--r-xl); background: var(--paper-sunk); }
  .recruitment-role:nth-child(4n + 2), .recruitment-role:nth-child(4n + 3) { background: var(--accent-tint); }
  .recruitment-role h3 { font-size: var(--fs-xl); line-height: var(--lh-snug); margin-block: var(--s-4); }
  .recruitment-role > p { font-size: var(--fs-sm); }
  .recruitment-role dl { border-block-start: 1px solid var(--rule-strong); margin-block-start: auto; padding-block-start: var(--s-3); font-size: var(--fs-sm); }
  .recruitment-role > p:last-of-type { margin-block-end: var(--s-5); }
  .recruitment-role dl > div { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--s-4); margin-block-start: var(--s-3); }
  .recruitment-role dt { color: var(--ink-2); }
  .recruitment-benefits { padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); list-style: none; }
  .recruitment-benefits li { border-block-start: 1px solid var(--rule-strong); padding-block-start: var(--s-4); }
  .recruitment-benefits h3 { font-size: var(--fs-xl); margin-block-end: var(--s-3); }
  .recruitment-benefits p { font-size: var(--fs-sm); }
  .recruitment-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; gap: var(--gutter); list-style: none; }
  .recruitment-steps li { border-block-start: 2px solid var(--rule-strong); padding-block-start: var(--s-5); }
  .recruitment-steps span { color: var(--brand); font-family: var(--font-mono); font-size: var(--fs-sm); }
  .recruitment-steps h3 { font-size: var(--fs-xl); margin-block: var(--s-4); }
  .recruitment-steps p { font-size: var(--fs-sm); }
  .recruitment-application { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
  .recruitment-application__intro { grid-column: 1 / span 4; padding-inline-end: var(--s-5); }
  .recruitment-form, .recruitment-confirmation { grid-column: 5 / span 8; }
  .recruitment-application__intro h2 { margin-block: var(--s-5); }
  .recruitment-application__intro > p { margin-block-end: var(--s-5); }
  .recruitment-form { max-inline-size: none; min-inline-size: 0; padding: clamp(var(--s-5), 3vw, var(--s-6)); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-xl); row-gap: var(--s-6); }
  .recruitment-form--google { display: grid; grid-template-columns: minmax(0, 1fr); }
  .recruitment-google__choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .recruitment-google__choice { min-block-size: 5.5rem; text-align: start; padding: var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--paper); cursor: pointer; }
  .recruitment-google__choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
  .recruitment-google__choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .recruitment-google__choice strong, .recruitment-google__choice span { display: block; }
  .recruitment-google__choice strong { font-size: var(--fs-lg); }
  .recruitment-google__choice span { margin-block-start: var(--s-2); color: var(--ink-2); font-size: var(--fs-sm); }
  .recruitment-google__panel { min-inline-size: 0; padding-block: var(--s-5); border-block: 1px solid var(--rule); }
  .recruitment-google__panel[hidden], .recruitment-google__frame[hidden], .recruitment-google__actions [hidden] { display: none; }
  .recruitment-google__panel h4 { font-size: var(--fs-xl); line-height: var(--lh-snug); }
  .recruitment-google__panel p { margin-block-start: var(--s-3); }
  .recruitment-google__status { color: var(--ink-2); }
  .recruitment-google__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-5); }
  .recruitment-google__frame { display: block; inline-size: 100%; block-size: 78rem; border: 1px solid var(--rule); border-radius: var(--r-md); margin-block-start: var(--s-5); background: var(--paper); }
  .recruitment-form[hidden] { display: none; }
  .recruitment-form__heading { font-size: var(--fs-xl); line-height: var(--lh-snug); border-block-start: 1px solid var(--rule); padding-block-start: var(--s-5); }
  .recruitment-form__heading:first-of-type { border: 0; padding: 0; }
  .recruitment-form .field { min-inline-size: 0; }
  .recruitment-form .field:not(.field--check) { align-self: start; }
  .recruitment-form .field__input { inline-size: 100%; }
  .recruitment-form .field__hint { font-size: var(--fs-sm); }
  .recruitment-form .field__error[hidden], .recruitment-fieldset[hidden], .recruitment-confirmation[hidden] { display: none; }
  .recruitment-fieldset { padding: 0; border: 0; min-inline-size: 0; }
  .recruitment-fieldset legend { font-family: var(--font-mono); font-weight: var(--fw-regular); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--ink-2); margin-block-end: var(--s-4); }
  .recruitment-fieldset .field__req { display: inline; font-size: inherit; }
  .recruitment-fieldset .field__hint { margin-block-start: var(--s-3); }
  .recruitment-choices { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .recruitment-choices--areas, .recruitment-choices--tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recruitment-choice { display: flex; gap: var(--s-3); align-items: center; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: var(--paper); padding: var(--s-4); min-block-size: 3.5rem; cursor: pointer; font-size: var(--fs-sm); line-height: var(--lh-snug); }
  .recruitment-choice:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
  .recruitment-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
  .recruitment-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
  .recruitment-choice input { appearance: auto; accent-color: var(--accent); inline-size: 1.125rem; block-size: 1.125rem; flex: 0 0 auto; }
  .recruitment-choice small { display: block; color: var(--ink-2); margin-block-start: var(--s-1); }
  .recruitment-optional { border-block: 1px solid var(--rule-strong); padding-block: var(--s-4); }
  .recruitment-optional summary { cursor: pointer; min-block-size: 2.75rem; font-weight: var(--fw-medium); line-height: var(--lh-body); padding-block: var(--s-2); }
  .recruitment-optional summary span { display: block; color: var(--ink-2); font-size: var(--fs-sm); font-weight: var(--fw-regular); }
  .recruitment-optional__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--gutter); padding-block-start: var(--s-4); }
  .recruitment-notice { padding: var(--s-5); border-radius: var(--r-md); border: 1px solid var(--rule-strong); }
  .recruitment-notice { background: var(--paper-sunk); }
  .recruitment-notice h3 { font-size: var(--fs-xl); }
  .recruitment-notice p { font-size: var(--fs-sm); margin-block: var(--s-3); }
  .recruitment-notice small { color: var(--ink-2); overflow-wrap: anywhere; }
  .recruitment-feedback { background: var(--paper); border-inline-start: 3px solid var(--status-closed); border-radius: var(--r-md); padding: var(--s-4); }
  .recruitment-confirmation { padding: var(--s-6); background: var(--accent-tint); border-radius: var(--r-xl); }
  .recruitment-confirmation h2 { margin-block: var(--s-5); }
  .recruitment-confirmation p { margin-block-end: var(--s-5); }
  .recruitment-form button:disabled { opacity: 0.65; cursor: not-allowed; }
  .recruitment-form .field--check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; font-size: var(--fs-sm); }
  .recruitment-form .field--check label { cursor: pointer; line-height: var(--lh-body); }
  .recruitment-form .form__foot { padding-block-start: var(--s-5); border-block-start: 1px solid var(--rule); align-items: start; }
  .recruitment-form .form__foot .field__hint { flex: 1 1 14rem; align-self: center; }
  .recruitment-form .field--check .field__error { grid-column: 2; }
  .recruitment-admin { max-inline-size: var(--container); }
  .recruitment-admin__intro { max-inline-size: 52rem; }
  .recruitment-admin__intro h1 { margin-block: var(--s-4) var(--s-5); }
  .recruitment-admin__intro .recruitment-note { margin-block-start: 0; }
  #admin-message { max-inline-size: none; margin-block: var(--s-6); }
  #admin-demo-controls { display: flex; align-items: end; flex-wrap: wrap; gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-lg); }
  #admin-demo-controls[hidden] { display: none; }
  #admin-demo-controls .field { flex: 0 1 24rem; }
  .recruitment-admin__filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); padding: var(--s-5); border-radius: var(--r-lg); background: var(--paper-sunk); margin-block: var(--s-6); }
  .recruitment-admin__filters .field { min-inline-size: 0; }
  .recruitment-admin__filters .field__input { inline-size: 100%; block-size: 3rem; }
  .recruitment-admin__toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-block: var(--s-6); }
  .recruitment-admin__toolbar .recruitment-note { margin: 0; }
  .recruitment-admin__layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--gutter); align-items: start; }
  .recruitment-admin__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block: var(--s-5); }
  .recruitment-admin__list { display: grid; gap: var(--s-3); align-content: start; }
  .recruitment-admin__item { border: 1px solid var(--rule-strong); border-radius: var(--r-md); padding: var(--s-4); text-align: start; cursor: pointer; min-block-size: 4rem; }
  .recruitment-admin__item[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); }
  .recruitment-admin__item span { display: block; font-size: var(--fs-sm); color: var(--ink-2); }
  .recruitment-admin__detail { padding: clamp(var(--s-5), 3vw, var(--s-6)); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); min-inline-size: 0; }
  .recruitment-admin__detail h2 { font-size: var(--fs-2xl); overflow-wrap: anywhere; }
  .recruitment-admin__detail > .recruitment-note { margin-block-start: var(--s-3); overflow-wrap: anywhere; }
  .recruitment-admin__detail dl > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--s-4); border-block-end: 1px solid var(--rule); padding-block-end: var(--s-4); }
  .recruitment-admin__detail > .btn { margin-block: var(--s-2); margin-inline-end: var(--s-2); }
  .recruitment-admin__detail dl { display: grid; gap: var(--s-4); margin-block: var(--s-5); }
  .recruitment-admin__detail dt { color: var(--ink-2); font-size: var(--fs-sm); }
  .recruitment-admin__detail dd { white-space: pre-wrap; overflow-wrap: anywhere; }
  .recruitment-admin__detail .field { margin-block: var(--s-4); }
  .recruitment-admin__detail .field__input { inline-size: 100%; }
  @media (max-width: 60rem) {
    .recruitment-split, .recruitment-application { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
    .recruitment-split > :first-child, .recruitment-split > :last-child, .recruitment-application > * { grid-column: 1 / -1; }
    .recruitment-application__intro { padding-inline-end: 0; }
    .recruitment-admin__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recruitment-admin__layout { grid-template-columns: minmax(0, 1fr); }
    .recruitment-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .recruitment-calendar .spec-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s-5); }
    .recruitment-calendar .spec-list > div { border-block-end: 0; }
  }
  @media (max-width: 40rem) {
    .recruitment-google__choices { grid-template-columns: minmax(0, 1fr); }
    .recruitment-google__actions .btn { inline-size: 100%; }
    .recruitment-google__frame { block-size: 110rem; }
    .recruitment-tracks, .recruitment-roles, .recruitment-benefits, .recruitment-steps, .recruitment-admin__layout, .recruitment-choices--tracks, .recruitment-optional__fields { grid-template-columns: minmax(0, 1fr); }
    .recruitment-choices--areas { grid-template-columns: minmax(0, 1fr); }
    .recruitment-track .btn, .recruitment-form .form__foot .btn { inline-size: 100%; }
    .recruitment-track .eyebrow { max-inline-size: 80%; }
    .recruitment-calendar .spec-list, .recruitment-admin__filters { grid-template-columns: minmax(0, 1fr); }
    .recruitment-admin__detail dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
    #admin-demo-controls .btn, .recruitment-admin__actions .btn { inline-size: 100%; }
  }
}