/* Tinker Harbor landing page. Same dark navy + amber look as Robot Rebellion. */
html, body { margin: 0; background: #101820; color: #f2f2f2; font-family: Verdana, Tahoma, sans-serif; font-size: 18px; line-height: 1.6; }
.loading-progress circle { stroke: #2b3a4a; }
.loading-progress circle:last-child { stroke: #ffb703; }
.loading-progress-text { color: #f2f2f2; }
a { color: #8ecae6; }

.site { max-width: 56rem; margin: 0 auto; padding: 0 1rem; min-height: 100vh; min-height: 100dvh; box-sizing: border-box; display: flex; flex-direction: column; }
main { flex: 1; }

.topbar { padding: 1rem 0; border-bottom: 1px solid #2b3a4a; }
.brand { color: #ffb703; font-weight: bold; font-size: 1.2rem; text-decoration: none; }

h1 { color: #ffb703; line-height: 1.2; }
.hero { text-align: center; padding: 2.5rem 0 1.5rem; }
.hero h1 { font-size: 2.2rem; margin: 0 0 0.75rem; }
.tagline { font-size: 1.1rem; max-width: 36rem; margin: 0 auto; color: #cfd8e0; }

.projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.card { display: flex; flex-direction: column; background: #1a2733; border: 2px solid #2b3a4a; border-radius: 0.75rem; padding: 1.25rem; color: inherit; text-decoration: none; }
a.card:hover, a.card:focus-visible { border-color: #ffb703; transform: translateY(-2px); }
.card h2 { margin: 0.25rem 0 0.5rem; color: #ffb703; font-size: 1.3rem; }
.card p { margin: 0 0 1rem; flex: 1; color: #cfd8e0; font-size: 0.95rem; }
.card-icon { font-size: 2.5rem; }
.card-cta { color: #101820; background: #ffb703; border-radius: 0.5rem; padding: 0.5rem 1rem; font-weight: bold; align-self: flex-start; }
.card-soon { border-style: dashed; opacity: 0.75; }

.btn { display: inline-block; background: #ffb703; color: #101820; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: bold; text-decoration: none; }

footer { border-top: 1px solid #2b3a4a; padding: 1rem 0; text-align: center; font-size: 0.85rem; color: #9fb0bf; }
footer p { margin: 0.25rem 0; }

@media (max-width: 480px) { html, body { font-size: 16px; } .hero h1 { font-size: 1.8rem; } }