/* The PACE and Rising Roads pages (PACE.html, Rising_Roads.html): one square
   tile per tool, in big letters. Loads after newsite.css and
   academic-forms/forms.css, which supply the program theme tokens. */
.hub-main { max-width: 1200px; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 22px; margin: 4px 0 40px; }
.hub-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; aspect-ratio: 1 / 1; min-height: 250px; padding: 28px; background: var(--paper); border: 2px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color .15s, border-color .15s, color .15s, transform .15s; }
.hub-tile:hover, .hub-tile:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); outline: none; }
.hub-tile:focus-visible { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--accent); }
.hub-kicker { position: absolute; top: 22px; left: 28px; right: 28px; display: flex; align-items: center; gap: 7px; font: 600 11px "Poppins", sans-serif; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.hub-tile:hover .hub-kicker, .hub-tile:focus-visible .hub-kicker { color: rgba(255, 255, 255, .8); }
.hub-kicker svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hub-tile strong { font-family: Georgia, serif; font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -1px; }
.hub-desc { font-size: 13px; line-height: 1.65; color: var(--muted); }
.hub-tile:hover .hub-desc, .hub-tile:focus-visible .hub-desc { color: rgba(255, 255, 255, .88); }
.hub-tile em { font-style: normal; font: 600 12px "Poppins", sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }
.hub-tile:hover em, .hub-tile:focus-visible em { color: #fff; }
.hub-note { font-size: 13px; line-height: 1.8; color: var(--muted); max-width: 680px; margin: 0; }
.hub-note strong { color: var(--ink); }
@media (max-width: 600px) {
  .hub-grid { grid-template-columns: 1fr; gap: 14px; }
  .hub-tile { aspect-ratio: auto; min-height: 0; padding: 24px 20px 20px; }
  .hub-kicker { position: static; margin-bottom: 18px; }
}