/* ─────────────────────────────────────────────────────────────────────────────
   Formstone Castle Art — classic site, UV-night theme.
   Dark + neon to match the 3D brand, but readability-first on long text.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  --bg:        #07041a;
  --bg-2:      #0d0820;
  --panel:     #140d2a;
  --ink:       #e8def8;     /* body text — high contrast on dark */
  --ink-dim:   #b9a6e6;
  --pink:      #ff3399;
  --pink-hot:  #ff7be0;
  --cyan:      #00ffcc;
  --green:     #88ff33;
  --edge:      #ff4dd8;
  --line:      #2a1f4a;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(1200px 700px at 70% -10%, #1a0f3a 0%, var(--bg) 55%) fixed, var(--bg);
  color: var(--ink); font-family: 'Inter', system-ui, sans-serif; line-height: 1.6;
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--pink-hot); }
img { max-width: 100%; display: block; }

/* ── header / nav ── */
.site-head {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 22px;
  padding: 12px 22px; background: rgba(7,4,26,0.82); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand {
  font-family: 'Audiowide', cursive; font-size: 18px; letter-spacing: 1px; color: #fff;
  text-shadow: 0 0 12px rgba(255,80,200,0.6); white-space: nowrap;
}
.brand span { color: var(--pink-hot); }
.nav { display: flex; gap: 18px; flex: 1; flex-wrap: wrap; }
.nav a { color: var(--ink-dim); font-size: 14px; letter-spacing: .5px; }
.nav a:hover, .nav a.on { color: #fff; text-shadow: 0 0 10px rgba(0,255,200,0.6); }
.enter3d {
  font-family: 'Audiowide', cursive; font-size: 13px; letter-spacing: 1px; white-space: nowrap;
  color: #fff; padding: 9px 16px; border: 1px solid var(--edge); border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,77,216,0.18), rgba(255,51,153,0.08));
  box-shadow: 0 0 16px rgba(255,77,216,0.35), inset 0 0 12px rgba(255,77,216,0.12);
}
.enter3d:hover { color: #fff; box-shadow: 0 0 26px rgba(255,77,216,0.7), inset 0 0 16px rgba(255,77,216,0.25); }

.site-main { flex: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 32px 22px 60px; }

/* ── headings ── */
h1, h2 { font-family: 'Audiowide', cursive; font-weight: 400; letter-spacing: 1px; line-height: 1.15; }
.page-title { font-size: clamp(26px, 4vw, 40px); color: #fff; text-shadow: 0 0 18px rgba(255,80,200,0.45); margin-bottom: 6px; }
.page-sub { color: var(--ink-dim); margin-bottom: 28px; }

/* ── portfolio grid ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.card {
  display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover { transform: translateY(-4px); border-color: var(--edge); box-shadow: 0 8px 30px rgba(255,77,216,0.25); }
.card .thumb { aspect-ratio: 4/3; background: #060312 center/cover no-repeat; }
.card .thumb.empty { display: flex; align-items: center; justify-content: center; color: #4a3a72; font-family: 'Audiowide', cursive; }
.card .meta { padding: 12px 14px 14px; }
.card .meta h2 { font-size: 16px; color: #fff; }
.card .meta .yr { color: var(--cyan); font-size: 13px; margin-top: 3px; }

/* ── project page ── */
.proj-head { margin-bottom: 22px; }
.proj-head .yr { color: var(--cyan); font-family: 'Audiowide', cursive; letter-spacing: 1px; }
.proj-hero { width: 100%; border-radius: 14px; border: 1px solid var(--line); margin: 8px 0 26px; }
.proj-body { display: grid; grid-template-columns: 1fr; gap: 26px; max-width: 820px; }
.proj-body p { margin-bottom: 14px; }
.proj-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; margin-top: 10px; }
.proj-gallery img { border-radius: 10px; border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip { font-size: 12px; color: var(--ink-dim); border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }
.cred { color: var(--ink-dim); font-size: 14px; }
.cred b { color: var(--ink); font-weight: 600; }
.back { display: inline-block; margin-bottom: 18px; color: var(--ink-dim); font-size: 14px; }

/* prose blocks (about / bio / statement / cv) */
.prose { max-width: 760px; }
.prose p { margin-bottom: 16px; }
.prose h2 { color: var(--pink-hot); font-size: 22px; margin: 26px 0 10px; }
.prose img { border-radius: 10px; border: 1px solid var(--line); margin: 14px 0; }
.stub { color: var(--ink-dim); border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; }

/* ── footer ── */
.site-foot {
  border-top: 1px solid var(--line); padding: 26px 22px; display: flex; align-items: center;
  justify-content: center; gap: 18px; flex-wrap: wrap; color: var(--ink-dim); font-size: 13px;
}
.foot-brand { font-family: 'Audiowide', cursive; color: #fff; opacity: .85; }

@media (max-width: 640px) {
  .site-head { flex-wrap: wrap; gap: 12px; }
  .nav { order: 3; width: 100%; }
}