/* ============================================================
   umairalikhatri.com — site layout on top of the Dil design system
   Tokens come from /ds/styles.css. This file only does layout,
   chrome, and the bits the SPA handled inline.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  transition: background-color 500ms ease, color 500ms ease;
  position: relative;
  overflow-x: hidden;
}
a { color: inherit; }
/* Body-text links get the underline treatment; component links (buttons, cards,
   gold links) opt out via :not() so their own styles win. */
.prose a:not(.btn):not(.card):not(.gold-link),
.keep-going a, .site-footer a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.prose a:not(.btn):not(.card):not(.gold-link):hover,
.keep-going a:hover, .site-footer a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.hl, .gold-link { color: var(--gold); }
.gold-link { text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 2px; }
.gold-link:hover { opacity: 0.75; }

/* --- night nebula (was inline in the SPA) --- */
.nebula { display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(88,40,120,0.07) 0%, transparent 70%),
    radial-gradient(ellipse at 70% 60%, rgba(30,80,100,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 85%, rgba(25,35,80,0.08) 0%, transparent 50%);
}
[data-mode="night"] .nebula { display: block; }

/* --- layout rails --- */
.site-header, .site-main, .site-footer { position: relative; z-index: 10; max-width: var(--content-reading); margin: 0 auto; }
.site-header { padding: var(--sp-6) var(--sp-4) var(--sp-2); }
.site-main   { padding: var(--sp-8) var(--sp-4) var(--sp-12); }
.site-footer { padding: var(--sp-8) var(--sp-4); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1); }

/* --- header / nav --- */
.nav { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 0.45em; font-weight: var(--w-semibold); text-decoration: none; color: var(--fg); }
.nav-sep { color: var(--border-strong); }
.nav-links { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: var(--fg-muted); font-size: var(--fs-body); }
.nav-links a:hover { color: var(--gold); }
.nav-links a[aria-current="page"] { color: var(--fg); font-weight: var(--w-semibold); }
.theme-toggle { margin-left: auto; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-pill); border: var(--bd-hair); }
.theme-toggle button { width: 30px; height: 30px; border-radius: var(--r-pill); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--fg-subtle); }
.theme-toggle button:hover { color: var(--fg); }
[data-mode="day"]   .theme-toggle button[data-mode-set="day"]   { background: var(--fg); color: var(--bg); }
[data-mode="night"] .theme-toggle button[data-mode-set="night"] { background: var(--surface); color: var(--fg); }

/* --- main content --- */
.prose { display: flex; flex-direction: column; gap: var(--sp-8); }
.prose section { display: flex; flex-direction: column; gap: var(--sp-3); }
.prose p { margin: 0; }
.page-head { display: flex; flex-direction: column; gap: var(--sp-3); }
.prose h1 { margin: 0; }
.prose h2 { margin: 0; }
.prose h3 { margin: 0; }
.prose ul { margin: 0; padding: 0; list-style-position: inside; display: flex; flex-direction: column; gap: var(--sp-1); }
.meta { font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--fg-muted); }
.muted { color: var(--fg-muted); max-width: 42em; }
.panel-label { font-size: var(--fs-small); font-weight: var(--w-medium); color: var(--fg-muted); margin: 0 0 var(--sp-2); }
.panel { padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); background: var(--surface); border: var(--bd-hair); }
.panel ul { color: var(--fg-muted); gap: 4px; }
.note { display: flex; flex-direction: column; gap: var(--sp-2); }
.note p { color: var(--fg-muted); font-size: var(--fs-small); font-style: italic; }

/* --- hero (home) --- */
.hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8vh 0 var(--sp-8); gap: 0; }
.hero .dil-mount { width: 140px; height: 110px; margin-bottom: var(--sp-6); }
.hero h1 { margin: 0 0 var(--sp-2); }
.hero-sub { margin: 0; font-size: var(--fs-h2); font-weight: var(--w-regular); color: var(--fg-muted); }

/* --- cards --- */
.home-cards { display: flex; flex-direction: column; gap: var(--sp-1); max-width: 520px; margin: 0 auto var(--sp-8); width: 100%; }
.card { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); text-decoration: none; color: var(--fg); transition: background-color var(--dur-hover) var(--ease-out); }
.card:hover { background: var(--border); }
.work .card, .card.work-card { border: var(--bd-hair); background: var(--surface); }
.card-text { display: flex; flex-direction: column; gap: 2px; }
.card-title { font-size: var(--fs-h3); font-weight: var(--w-semibold); line-height: var(--lh-snug); }
.card-sub { font-size: var(--fs-small); color: var(--fg-muted); }
.card-arrow { opacity: 0.3; flex-shrink: 0; }

.home-contact { margin-top: var(--sp-8); display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.contact-line, .cta-line { margin: 0; font-size: var(--fs-h2); font-weight: var(--w-medium); line-height: var(--lh-snug); }
.footer-rule { width: 40px; height: 1px; background: var(--border-strong); }
.home-contact .footer-rule { margin-bottom: var(--sp-4); }
.cta { display: flex; flex-direction: column; gap: var(--sp-2); }

/* --- keep going --- */
.keep-going { display: flex; flex-direction: column; gap: var(--sp-2); }
.keep-going p { margin: 0; }
.kg-title { font-weight: var(--w-medium); }

/* --- rows (three ways in) --- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: var(--bd-hair); }
.row:last-child { border-bottom: var(--bd-hair); }
.row p { color: var(--fg-muted); }

/* --- dil showcase grid --- */
.dil-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-1); }
.dil-cell { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border: var(--bd-hair); border-radius: var(--r-m); background: var(--surface); }
.dil-fig { display: block; width: 64px; }
.dil-cell figcaption { display: flex; flex-direction: column; gap: 2px; }
.dc-name { font-size: var(--fs-small); font-weight: var(--w-semibold); }
.dc-desc { font-size: var(--fs-small); color: var(--fg-muted); }

/* --- skill-kit landing --- */
.skillkit { gap: var(--sp-12); }
.eyebrow { font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-subtle); font-weight: var(--w-semibold); }
.sk-hero { gap: var(--sp-4); padding-top: var(--sp-6); }
.lead { color: var(--fg-muted); max-width: 34em; }
.bignum { font-size: var(--fs-display); font-weight: var(--w-heavy); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
.btn-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-s); text-decoration: none; font-weight: var(--w-medium); transition: box-shadow var(--dur-hover) var(--ease-out); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { box-shadow: var(--elev-2); }
.btn-ghost { background: transparent; color: var(--fg); border: var(--bd-strong); }
.btn-ghost:hover { box-shadow: var(--elev-1); }
.btn-sm { font-size: var(--fs-small); padding: var(--sp-1) var(--sp-2); }

/* --- mascot animation --- */
.dil-mount { color: var(--dil-body); }
.dil-mount svg { display: block; width: 100%; height: 100%; }
.dil-mount .mascot-body { fill: currentColor; }
.dil-mount .mascot-eyes { fill: var(--dil-eye); }
.dil-mount .mascot-shadow { fill: currentColor; }
.dil-mount .mascot-sparkles { fill: var(--gold); }
.dil-mount .mascot-character { animation: dil-float var(--dur-idle, 2.5s) var(--ease-sine) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes dil-float { 0%,100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }

/* --- footer --- */
.site-footer p { margin: 0; font-size: var(--fs-small); color: var(--fg-muted); }
.footer-meta { margin-top: var(--sp-1); }
.site-footer .footer-rule { margin-bottom: var(--sp-4); }

/* --- a11y --- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--fg); color: var(--bg); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); }
.skip-link:focus { left: var(--sp-2); top: var(--sp-2); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

/* --- responsive --- */
@media (max-width: 560px) {
  .nav-sep { display: none; }
  .theme-toggle { margin-left: 0; }
  .brand span:last-child { font-size: var(--fs-small); }
  .row { grid-template-columns: 1fr; gap: var(--sp-1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dil-mount .mascot-character { animation: none; }
  body { transition: none; }
}