/* hub + 404. Extends atelier.css. */
.hub-hero{padding-block:clamp(48px,8vw,120px) clamp(24px,4vw,48px)}
.hub-hero .wrap{display:grid;gap:20px}
.tools{padding-top:0}
.tools .wrap{display:grid;gap:16px}
@media (min-width:900px){.tools .wrap{grid-template-columns:1fr 1fr;gap:24px}}
.tool{display:grid;gap:14px;align-content:start;padding:28px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;min-height:280px}
.tool .go{margin-top:auto;font-weight:500;font-size:15px;text-decoration:underline;text-underline-offset:4px}
@media (hover:hover) and (pointer:fine){
  .tool{transition:transform 220ms var(--ease)}
  .tool:hover{transform:translateY(-3px)}
}
@media (prefers-reduced-motion:reduce){.tool{transition:opacity 160ms var(--ease)!important;transform:none!important}}
/* the connector page: a command that wraps anywhere on a phone instead of breaking the layout */
.cmd{display:block;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;overflow-x:auto;color:var(--ink)}
.cmd span{white-space:nowrap} /* never split a token: a URL broken at its hyphens reads as a different address */
.facts:has(.cmd),.facts li:has(.cmd){grid-template-columns:minmax(0,1fr)} /* let the command box shrink and scroll on a 320px phone */