/* utilities.css
   Layout and accessibility utilities shared by every view.
   ------------------------------------------------------------------------- */

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.mono { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -48px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 10px 16px; border-radius: var(--r-m); font-weight: 600;
  transition: top .18s var(--ease);
}

.skip:focus { top: 12px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-red); margin-bottom: 20px;
}

.eyebrow::before { content: ''; width: 22px; height: 3px; background: currentColor; }

.sec-note { font-size: 13px; color: var(--ink-3); margin: -8px 0 15px; }

.page-hd { padding: 52px 0 34px; border-bottom: 1px solid var(--line); }

.page-hd h1 { font-size: clamp(27px, 4.2vw, 44px); font-weight: 800; letter-spacing: -.032em; max-width: 22ch; }

.page-hd p { font-size: clamp(15px, 1.6vw, 17.5px); color: var(--ink-2); margin-top: 15px; max-width: 68ch; }

.view { animation: rise .34s var(--ease) both; }

@media (max-width: 860px) {
  .wrap, .hdr-in { padding: 0 20px; }
}

@media (max-width: 420px) {
  .wrap { padding: 0 14px; }
}

.mini-h {
  font-size: 12px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 16px;
}