/* ============================================================
   nikiel.xyz — styles
   Single landing page. No framework, no build step.

   DESIGN TOKENS live in :root below. Change the whole look from
   here — palette, type, and sizing are all one-line edits.
   ============================================================ */

:root {
  /* ---- Palette (dark phosphor-terminal default) ----
     Want a light site instead? See the LIGHT THEME block at the
     bottom of this file — uncomment it and it wins. */
  --bg:        #0d0d0f;   /* page background */
  --ink:       #e8e8e6;   /* primary text   */
  --ink-dim:   #8a8a86;   /* secondary text */
  --accent:    #6ee787;   /* links + pixel-grid glow (terminal green) */
  --accent-2:  #2a3a2e;   /* dim grid cells */

  /* ---- Type ----
     Mono reads most "retro-digital". For an editorial serif instead,
     swap --font-body to: Georgia, "Times New Roman", serif; */
  --font-body: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;

  /* ---- Sizing ---- */
  --measure:   62ch;   /* max reading width   */
  --col:       600px;  /* content column width */
  --pad:       1.5rem;
}

/* ---- Reset (minimal) ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { font-size: 16px; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding: var(--pad);
}

/* ---- Background canvas: full-bleed, behind content ---- */
#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}

/* ---- The one content card ---- */
.card {
  width: 100%;
  max-width: var(--col);
  /* Translucent panel so the pixel grid reads faintly through it. */
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: 4px;            /* keep it boxy/retro; 0 for full pixel feel */
  padding: 2.25rem 2rem;
  backdrop-filter: blur(2px);
}

.name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.descriptor {
  margin: 0.25rem 0 1.5rem;
  color: var(--ink-dim);
  font-size: 0.95rem;
}

.intro {
  margin: 0 0 1.75rem;
  max-width: var(--measure);
}

/* ---- Link cluster: links separated by middots via CSS ---- */
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.95rem;
}
.links a {
  position: relative;
}
.links a:not(:last-child)::after {
  content: "·";
  position: absolute;
  right: -0.65rem;
  color: var(--ink-dim);
}
/* Temporary placeholder styling (e.g. unconfirmed email). Remove once the
   slot becomes a real <a> link. */
.links .link-placeholder {
  color: var(--ink-dim);
  font-style: italic;
}

/* ---- Links ---- */
a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}
a:hover,
a:focus-visible {
  border-bottom-color: var(--accent);
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- Footer ---- */
.foot {
  color: var(--ink-dim);
  font-size: 0.8rem;
}

/* ---- Small screens ---- */
@media (max-width: 480px) {
  .card { padding: 1.75rem 1.25rem; }
  .name { font-size: 1.4rem; }
}

/* ============================================================
   FUTURE GROWTH — styles to uncomment when a writing section is
   added. Kept here as reference only; nothing below renders today.
   ============================================================ */

/* --- Nav header (pairs with the commented <header> in index.html) ---
.site-nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between;
  padding: 1rem var(--pad);
  font-size: 0.9rem;
}
.site-nav .brand { font-weight: 700; }
*/

/* --- Prose: post body typography for /writing/<slug> pages ---
.prose {
  max-width: var(--measure);
  margin: 0 auto;
}
.prose h1 { font-size: 1.5rem; }
.prose p  { margin: 0 0 1.1rem; }
.prose em { color: var(--ink); }
.prose hr { border: 0; border-top: 1px solid var(--ink-dim); margin: 2rem 0; }
*/

/* ============================================================
   LIGHT THEME (optional) — uncomment to flip the whole site light.
   ============================================================ */
/*
:root {
  --bg:       #f4f3ee;
  --ink:      #1a1a18;
  --ink-dim:  #6b6b66;
  --accent:   #1f6f3d;
  --accent-2: #d8e6d8;
}
*/