/*
 * wayofljilla.com
 *
 * Self-contained replacement for the old normalize + barebones + vncnt +
 * Font Awesome stack (~90KB of CSS plus a webfont). Design tokens and the
 * 5fr/7fr split layout are carried over from the original vncnt theme so the
 * page still reads the same.
 */

:root {
  --accent-hue: 194;

  --text-richer: hsl(0, 0%, 5%);
  --text-normal: hsl(0, 0%, 13%);
  --text-softer: hsl(0, 0%, 33%);

  --accent: hsl(var(--accent-hue), 86%, 57%);
  --accent-hover: hsl(var(--accent-hue), 76%, 49%);

  --background: #fff;

  --icon-size: 2.5rem;
  --gap: 2rem;

  --font-sans: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The original used prefers-color-scheme with a light-on-dark palette. */
@media (prefers-color-scheme: dark) {
  :root {
    --text-richer: hsl(0, 0%, 95%);
    --text-normal: hsl(0, 0%, 80%);
    --text-softer: hsl(0, 0%, 67%);

    --accent: hsl(var(--accent-hue), 76%, 49%);
    --accent-hover: hsl(var(--accent-hue), 86%, 57%);

    --background: hsl(0, 0%, 12%);
  }

  .avatar {
    opacity: 0.85;
    transition: opacity 0.4s ease-in-out;
  }
  .avatar:hover {
    opacity: 1;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--gap);

  background: var(--background);
  color: var(--text-normal);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
}

.landing {
  width: 100%;
  max-width: 960px;
}

/* Mobile: stacked and centred. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: center;
  text-align: center;
}

.avatar {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 15rem;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
}

.bio h1 {
  margin: 0 0 0.5rem;
  font-size: clamp(1.9rem, 6vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--text-richer);
}

.bio p {
  margin: 0 0 1.25rem;
  color: var(--text-softer);
  font-size: 1rem;
  text-wrap: pretty;
}

.links ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-size);
  height: var(--icon-size);
  color: var(--text-softer);
  text-decoration: none;
  border-radius: 50%;
  transition: color 0.2s ease, transform 0.2s ease;
}

.icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon:hover,
.icon:focus-visible {
  color: var(--accent-hover);
  transform: translateY(-2px);
}

.icon:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Desktop: the 5fr / 7fr split from the original theme. */
@media (min-width: 600px) {
  .split {
    grid-template-columns: 5fr 7fr;
    gap: 2.5rem;
    text-align: left;
  }

  .avatar {
    max-width: 100%;
    margin: 0;
  }

  .links ul {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  .icon:hover {
    transform: none;
  }
}