/* Page-specific composition. Anything reusable belongs in system.css. */

/* A soft field of brand light behind the top of the page. This is the whole
   "bright" strategy: the background is never flat, but it never competes with
   text either, because the colour lives well below the contrast threshold. */
.aurora {
  position: fixed;
  inset: -20vh 0 auto 0;
  height: 90vh;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46vw 46vw at 78% 8%, oklch(78% 0.17 var(--hue-brand) / 0.28), transparent 62%),
    radial-gradient(40vw 40vw at 12% 0%, oklch(72% 0.20 var(--hue-accent) / 0.20), transparent 64%),
    radial-gradient(60vw 30vw at 50% 34%, oklch(88% 0.09 190 / 0.16), transparent 70%);
  filter: blur(8px);
}

.glyph-btn {
  background: none; border: 1px solid var(--line);
  color: var(--ink-soft); border-radius: var(--r-full);
  width: 2rem; height: 2rem; cursor: pointer; font-size: 0.9rem;
  display: grid; place-items: center;
  transition: color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.glyph-btn:hover { color: var(--ink); border-color: var(--brand-400); }

/* ---- hero -------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
  /* The hero should fit one screen on a laptop; anything past the fold is a
     promise the visitor has to scroll to collect. */
  padding-block: clamp(var(--s-6), 5vw, var(--s-8)) clamp(var(--s-7), 6vw, var(--s-9));
}
.hero-copy .lead { margin-top: var(--s-5); }
.hero-cta { margin-top: var(--s-6); }

.hero-art {
  position: relative;
  display: block;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-4);
  border: 1px solid var(--line);
  transform: rotate(1.4deg);
  transition: transform var(--d-slow) var(--ease-out), box-shadow var(--d-slow) var(--ease-out);
}
.hero-art:hover { transform: rotate(0deg) translateY(-4px); }
.hero-art img { width: 100%; }
.art-glow {
  position: absolute; inset: -30%;
  background: radial-gradient(closest-side, oklch(70% 0.2 var(--hue-brand) / 0.5), transparent);
  filter: blur(40px);
  z-index: -1;
}
.art-tag { position: absolute; top: var(--s-4); left: var(--s-4); backdrop-filter: blur(8px); }

/* ---- featured project -------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(var(--s-5), 4vw, var(--s-7));
  align-items: center;
  padding: clamp(var(--s-5), 4vw, var(--s-7));
  margin-top: var(--s-6);
}
.feature h3 { margin-bottom: var(--s-3); }
.feature .more {
  display: inline-block;
  margin-top: var(--s-5);
  font-weight: 600;
  font-size: var(--t-sm);
  color: var(--brand-600);
}
.card-link:hover .more span { transform: translateX(3px); display: inline-block; }
.feature-art { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }

.specs {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}
.specs li { display: flex; gap: var(--s-3); align-items: baseline; }
.specs b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  min-width: 5.5rem;
}

/* ---- about ------------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(var(--s-5), 5vw, var(--s-8));
  align-items: start;
}

/* ---- footer ------------------------------------------------------------ */

.footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-6);
  margin-top: var(--s-8);
}

@media (max-width: 860px) {
  .hero, .feature, .about-grid { grid-template-columns: 1fr; }
  .hero-art { transform: none; order: -1; }
  .feature-art { order: -1; }
  .nav-links { gap: var(--s-4); }
}

/* A card that is deliberately not a link — it has nowhere to go, and
   pretending otherwise is how placeholder grids happen. */
.quiet-card { background: transparent; border-style: dashed; box-shadow: none; }