/* PRJKT8 hub: the front page of hub.prjkt8.com. One tile per app the person may open.
   Brand: Avenir; Minion Pro (Crimson Pro stands in) for the greeting; Dark Teal #284653 and Clay #E4E3E0. */
@font-face { font-family: "Crimson Pro"; font-style: italic; font-weight: 400; font-display: swap; src: url("/book/fonts/crimson-pro-italic-latin.woff") format("woff"); }
:root {
  --ground: #E4E3E0; --card: #F4F4F2; --ink: #1E2F36; --soft: #56666F; --faint: #7E8991; --accent: #284653; --on-accent: #F4F3F1;
  --line: rgba(30,47,54,.12); --tile: #284653; --tile-ink: #F4F3F1;
  --sans: "Avenir", "Avenir Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Minion Pro", "Crimson Pro", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --ground: #101A1F; --card: #1E2F36; --ink: #E4E3E0; --soft: #A9B4BA; --faint: #7E8991; --accent: #B0C1BF; --on-accent: #16242A;
    --line: rgba(228,227,224,.10); --tile: #1E2F36; --tile-ink: #E4E3E0; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--ground); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
.hub { max-width: 720px; margin: 0 auto; padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px calc(env(safe-area-inset-bottom, 0px) + 32px);
  display: grid; gap: 22px; }
.logo { display: block; width: 120px; height: 26px; background: currentColor;
  -webkit-mask: url("/hub/logo.svg") no-repeat left center / contain; mask: url("/hub/logo.svg") no-repeat left center / contain; }
.hello { margin: 6px 0 0; font-family: var(--serif); font-style: italic; font-size: 26px; color: var(--soft); min-height: 1.3em; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.app { display: grid; gap: 14px; align-content: space-between; min-height: 150px; padding: 18px; border-radius: 22px; text-decoration: none;
  background: var(--tile); color: var(--tile-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); transition: transform .15s ease; }
.app:active { transform: scale(.98); }
.app svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.app b { display: block; font-size: 18px; font-weight: 800; }
.app small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.35; opacity: .75; }
.signin { display: grid; gap: 14px; justify-items: start; }
.signin p, .note { margin: 0; color: var(--soft); font-size: 16px; }
.btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 22px; border-radius: 999px; background: var(--accent);
  color: var(--on-accent); font-weight: 700; text-decoration: none; }
.foot { margin-top: 10px; }
.link { border: 0; background: none; padding: 8px 0; font: inherit; font-size: 14px; color: var(--faint); cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .app { transition: none; } }