@layer site {
/* Administration & Bureaucracy — phone-width fixes from spec/05. Desktop and tablet are
   unchanged (the design's inline styles apply). */

/* Fix #2: "ADMINISTRATION," is 6.58× the font size wide. The design's clamp(72px, 9vw, 150px)
   bottoms out at 72px (474px wide), which clips on narrow screens. min() only shrinks it when the word would not fit. */
@media (max-width: 759.98px) {
  /* size against the h1's own column (its parent has padding and a border) */
  .adm-h1-wrap { container-type: inline-size; }
  .adm-h1 { font-size: min(72px, calc((100cqw - 48px) / 6.75)) !important; } /* 48px: the 3px letter-spacing on ~16 letters */
}

/* Fix #3: the three signature steps run into each other at phone width. Stack them,
   keeping the circles and a vertical connecting line. */
@media (max-width: 559.98px) {
  .sig-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
  .sig-steps > li { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 20px; row-gap: 6px !important; }
  .sig-steps > li > span:first-child { grid-row: span 2; }
  /* top and height are set by administration.js (first to last circle centre) */
  .sig-line { left: 31px !important; right: auto !important; width: 2px !important; }
  .sig-fill { width: 100% !important; height: var(--sig, 0%) !important; transition: height .45s !important; }
}

}