/* ── Theme variables ───────────────────────────────────────── */
:root {
  --bg: #ffffff;
  --text: #1a1a1a;
  --para: #444444;
  --muted: #777777;
  /* Purple defaults — overridden by [data-primary] */
  --accent:       #7c3aed;
  --accent-alt:   #6d28d9;
  --accent-hover: #5b21b6;
  --surface:      rgba(124, 58, 237, 0.06);
  --surface-2:    rgba(124, 58, 237, 0.12);
  --surface-3:    rgba(124, 58, 237, 0.20);
  --border:       rgba(124, 58, 237, 0.45);
  --font-body: "puffin", sans-serif;
  --font-heading: "puffin-arcade-regular", sans-serif;
  --font-ui: "puffin-display-soft", sans-serif;
  --font-mono: "space-mono", "Monaco", "Consolas", monospace;
  --glow-h1: none;
  --glow-h2: none;
  --glow-link: none;
  --glow-link-hover: none;
  --glow-home: none;
  --shadow-nav: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-content: 0 2px 10px rgba(0, 0, 0, 0.06);
  --shadow-btn-hover: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* ── Purple palette ────────────────────────────────────────── */
[data-primary="purple"] {
  --color-primary-50:  #ede9fe;
  --color-primary-100: #ddd6fe;
  --color-primary-200: #c4b5fd;
  --color-primary-400: #7c3aed;
  --color-primary-500: #6d28d9;
  --color-primary-600: #5b21b6;
  --color-primary-800: #3b0764;
  --color-primary-900: #2e1065;

  --accent:       #7c3aed;
  --accent-alt:   #6d28d9;
  --accent-hover: #5b21b6;
  --surface:      rgba(124, 58, 237, 0.06);
  --surface-2:    rgba(124, 58, 237, 0.12);
  --surface-3:    rgba(124, 58, 237, 0.20);
  --border:       rgba(124, 58, 237, 0.45);
}

/* ── Orange palette ────────────────────────────────────────── */
[data-primary="orange"] {
  --color-primary-50:  #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-200: #fed7aa;
  --color-primary-400: #ea580c;
  --color-primary-500: #c2410c;
  --color-primary-600: #9a3412;
  --color-primary-800: #7c2d12;
  --color-primary-900: #431407;

  --accent:       #ea580c;
  --accent-alt:   #c2410c;
  --accent-hover: #9a3412;
  --surface:      rgba(234, 88, 12, 0.06);
  --surface-2:    rgba(234, 88, 12, 0.12);
  --surface-3:    rgba(234, 88, 12, 0.20);
  --border:       rgba(234, 88, 12, 0.45);
}

:root[data-theme="dark"] {
  --bg: #0f0f0f;
  --text: #e2e2e2;
  --para: #aaaaaa;
  --muted: #666666;
  /* Purple dark defaults — overridden by compound selectors below */
  --accent:       #c4b5fd;
  --accent-alt:   #ddd6fe;
  --accent-hover: #a78bfa;
  --surface:      rgba(196, 181, 253, 0.08);
  --surface-2:    rgba(196, 181, 253, 0.15);
  --surface-3:    rgba(196, 181, 253, 0.25);
  --border:       rgba(196, 181, 253, 0.5);
  --font-body: "puffin", sans-serif;
  --font-heading: "puffin-arcade-nerf", sans-serif;
  --font-ui: "puffin-display-soft", sans-serif;
  --font-mono: "space-mono", "Monaco", "Consolas", monospace;
  --glow-h1: none;
  --glow-h2: none;
  --glow-link: none;
  --glow-link-hover: none;
  --glow-home: none;
  --shadow-nav:       0 2px 12px rgba(196, 181, 253, 0.15);
  --shadow-card:      0 1px 6px  rgba(196, 181, 253, 0.10);
  --shadow-content:   0 2px 15px rgba(196, 181, 253, 0.10);
  --shadow-btn-hover: 0 0 8px    rgba(196, 181, 253, 0.30);
}

/* ── Dark + Purple ─────────────────────────────────────────── */
:root[data-theme="dark"][data-primary="purple"] {
  --accent:       #c4b5fd;
  --accent-alt:   #ddd6fe;
  --accent-hover: #a78bfa;
  --surface:      rgba(196, 181, 253, 0.08);
  --surface-2:    rgba(196, 181, 253, 0.15);
  --surface-3:    rgba(196, 181, 253, 0.25);
  --border:       rgba(196, 181, 253, 0.5);
  --shadow-nav:       0 2px 12px rgba(196, 181, 253, 0.15);
  --shadow-card:      0 1px 6px  rgba(196, 181, 253, 0.10);
  --shadow-content:   0 2px 15px rgba(196, 181, 253, 0.10);
  --shadow-btn-hover: 0 0 8px    rgba(196, 181, 253, 0.30);
}

/* ── Dark + Orange ─────────────────────────────────────────── */
:root[data-theme="dark"][data-primary="orange"] {
  --accent:       #fb923c;
  --accent-alt:   #fdba74;
  --accent-hover: #f97316;
  --surface:      rgba(251, 146, 60, 0.08);
  --surface-2:    rgba(251, 146, 60, 0.15);
  --surface-3:    rgba(251, 146, 60, 0.25);
  --border:       rgba(251, 146, 60, 0.5);
  --shadow-nav:       0 2px 12px rgba(251, 146, 60, 0.15);
  --shadow-card:      0 1px 6px  rgba(251, 146, 60, 0.10);
  --shadow-content:   0 2px 15px rgba(251, 146, 60, 0.10);
  --shadow-btn-hover: 0 0 8px    rgba(251, 146, 60, 0.30);
}

:root[data-theme="retro"] {
  --bg: #0a0a0a;
  --text: #00ff00;
  --para: #cccccc;
  --muted: #888888;
  --accent: #00ff41;
  --accent-alt: #00e635;
  --accent-hover: #39ff14;
  --surface: rgba(0, 255, 65, 0.1);
  --surface-2: rgba(0, 255, 65, 0.2);
  --surface-3: rgba(0, 255, 65, 0.3);
  --border: #00ff41;
  --font-body: "puffin", sans-serif;
  --font-heading: "puffin-arcade-tate", sans-serif;
  --font-ui: "puffin-display-soft", sans-serif;
  --font-mono: "space-mono", "Monaco", "Consolas", monospace;
  --glow-h1: 0 0 10px #00ff41;
  --glow-h2: 0 0 5px #00e635;
  --glow-link: 0 0 3px #00ff41;
  --glow-link-hover: 0 0 8px #39ff14;
  --glow-home: 0 0 10px #00ff41;
  --shadow-nav: 0 0 20px rgba(0, 255, 65, 0.3);
  --shadow-card: 0 0 15px rgba(0, 255, 65, 0.2);
  --shadow-content: 0 0 25px rgba(0, 255, 65, 0.2);
  --shadow-btn-hover: 0 0 10px rgba(0, 255, 65, 0.4);
}

/* ── Base ──────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
}

/* Page wrap — constrains nav + content, lets footer go full-width */
.page-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Type scale (major third: ×1.25) ──────────────────────── */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  margin-top: 1.2em;
  margin-bottom: 0.4em;
  color: var(--accent);
}
h1 {
  font-size: 3.815rem;
  font-weight: 600;
  text-shadow: var(--glow-h1);
  margin-bottom: 0.5em;
  text-transform: capitalize;
}
h2 {
  font-size: 3.052rem;
  font-weight: 500;
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  margin-top: 1.5em;
  color: var(--accent-alt);
  text-shadow: var(--glow-h2);
}
h3 {
  font-size: 2.441rem;
  font-weight: 500;
  color: var(--accent-hover);
}
h4 {
  font-size: 1.953rem;
  font-weight: 500;
}
h5 {
  font-size: 1.563rem;
  font-weight: 500;
}
h6 {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--muted);
}

.retro-text {
  font-size: 3.815rem;
  font-weight: 600;
  text-shadow: var(--glow-h1);
  margin-bottom: 0.5em;
  text-transform: capitalize;
  font-family: "space-mono", serif; /* */
  color: var(--accent);
  position: relative; /* Needed for z-index */
  transform: skewX(-10deg); /* Skew the text for a dynamic feel */
  text-shadow:
    -2px 2px 0 #ffb650,
    /* Orange layer */ -4px 4px 0 #ff80bf,
    /* Pink layer */ -6px 6px 0 #6868ac; /* Dark blue layer for depth */
  /* Add more shadow layers for greater depth */
}

p {
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  color: var(--para);
}
small {
  font-size: 0.8rem;
  color: var(--muted);
}

a {
  color: var(--accent);
}
a:hover {
  color: var(--accent-hover);
}

/* ── Code & pre ────────────────────────────────────────────── */
pre,
code,
kbd {
  font-family: var(--font-mono);
  font-optical-sizing: auto;
}
pre {
  font-size: 0.875rem;
  font-weight: 400;
  background: var(--surface-2);
  border-radius: 6px;
  padding: 1.25em 1.5em;
  overflow-x: auto;
  line-height: 1.6;
}
code {
  font-size: 0.875em;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 4px;
}
pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* ── Utility: keyboard shortcut chip ──────────────────────── */
/* Usage: <span class="kbd">⌘K</span> or <span class="kbd">Copy</span> */
.kbd {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  box-shadow: 0 1px 0 var(--border);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
}
.kbd:hover {
  background: var(--surface-3);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 2px 3px 0 var(--border);

}

/* ── Utility: article tag pill ────────────────────────────── */
/* Usage: <a class="tag" href="/tags/foo">foo</a> */
.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  text-decoration: none;
  transition:
    background 0.15s,
    color 0.15s;
}
.tag:hover {
  background: var(--surface-3);
  color: var(--accent-hover);
}

/* ── Utility: published date ───────────────────────────────── */
/* Usage: <time class="date">2026-03-15</time> */
.date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}


/* .kbd button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  padding: 5px 11px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--accent);
  box-shadow: 0 1px 0 var(--border);
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  text-decoration: none;
}


/* ── Nav ───────────────────────────────────────────────────── */
nav {
  display: flex;
  align-items: left;
  margin-bottom: 30px;
  padding: 15px 0;
}
nav a {
  margin-right: 20px;
  text-decoration: none;
  color: var(--accent);
  font-family: var(--font-ui);
  font-weight: bold;
  text-shadow: var(--glow-link);
}
nav a:hover {
  color: var(--accent-hover);
  text-shadow: var(--glow-link-hover);
}
.home-link {
  font-size: 1.3em;
  font-weight: bold;
  color: var(--accent) !important;
  text-shadow: var(--glow-home) !important;
}

/* ── Theme switcher ────────────────────────────────────────── */
.theme-switcher {
  display: flex;
  margin-left: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.theme-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--accent);
  padding: 5px 9px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 1em;
  font-weight: bold;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s,
    color 0.15s;
}
.theme-btn:first-child {
  border-left: none;
}
.theme-btn:hover {
  background: var(--surface-2);
  color: var(--accent-hover);
  text-shadow: var(--glow-link-hover);
}
/* Active button: CSS-only, driven by data-theme on :root */
:root[data-theme="light"] .theme-btn[data-theme="light"],
:root[data-theme="dark"] .theme-btn[data-theme="dark"],
:root[data-theme="retro"] .theme-btn[data-theme="retro"] {
  background: var(--accent);
  color: var(--bg);
  text-shadow: none;
}

/* ── Color picker ──────────────────────────────────────────── */
.color-switcher {
  display: flex;
  margin-left: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.color-btn {
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  color: var(--accent);
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 0.75em;
  font-weight: bold;
  transition:
    background 0.15s,
    color 0.15s;
}
.color-btn:first-child {
  border-left: none;
}
.color-btn:hover {
  background: var(--surface-2);
  color: var(--accent-hover);
}
/* Active color button */
:root[data-primary="purple"] .color-btn[data-primary="purple"],
:root[data-primary="orange"] .color-btn[data-primary="orange"] {
  background: var(--accent);
  color: var(--bg);
  text-shadow: none;
}

/* ── Content areas ─────────────────────────────────────────── */
.content {
}
.post-meta {
  color: var(--muted);
  font-size: 0.9em;
  margin-bottom: 20px;
  border-left: 3px solid var(--accent);
  padding-left: 12px;
  background: var(--surface);
}
.post-list {
  list-style: none;
  padding: 0;
}
.post-list li {
  margin-bottom: 25px;
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 5px 5px 0 var(--border);

}
.post-list li:hover {
  border: 1px solid var(--accent);

  box-shadow: 2px 3px 0 var(--accent-hover);

}


.post-list a {
  text-decoration: none;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.1em;
  text-shadow: var(--glow-link);
}
.post-list a:hover {
  color: var(--accent-hover);
  text-shadow: var(--glow-link-hover);
}

/* ── Tutorial navigation ───────────────────────────────────── */
.tutorial-nav {
  margin-top: 3em;
  padding: 0;
}
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1em;
  width: 100%;
}

.prev-link {
  align-items: start;
  margin-right: auto;
}
.index-link {
}
.next-link {
  align-items: end;
  margin-left: auto;
}

.tutorial-series {
  background: var(--surface-2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
  margin-left: 1em;
  border: 1px solid var(--border);
}

/* ── Landing page components ───────────────────────────────── */

/* Hero */
.hero {
  padding: 2.5rem 0 2rem;
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 2rem;
}
.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}
.hero-title {
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  margin: 0 0 1rem;
  text-shadow: var(--glow-h1);
  text-transform: none;
}
.hero-title em {
  font-style: normal;
  color: var(--muted);
}
.hero-body {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--para);
  max-width: 620px;
  margin: 0 0 1.5rem;
}
.hero-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.cta-primary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: 6px;
  background: var(--text);
  color: var(--bg);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s;
}
.cta-primary:hover {
  opacity: 0.8;
  color: var(--bg);
}
.cta-secondary {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 6px;
  border: 0.5px solid var(--border);
  color: var(--para);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}
.cta-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Lineage block */
.lineage-block {
  background: var(--surface);
  border-radius: 8px;
  border: 0.5px solid var(--border);
  padding: 1.1rem 1.4rem;
  margin-bottom: 2rem;
}
.lineage-block p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--para);
  margin: 0;
}

/* Shared section wrapper */
.landing-section {
  margin-bottom: 2.5rem;
}
.section-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

/* What you'll learn grid */
.what-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 0;
}
.what-card {
  padding: 1rem;
  background: var(--surface);
  border-radius: 8px;
  border: 0.5px solid var(--border);
}
.what-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.3rem;
}
.what-desc {
  font-size: 12px;
  color: var(--para);
  line-height: 1.5;
  margin: 0;
}

/* Worlds grid */
.worlds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.world-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  position: relative;
}
.world-card.available {
  cursor: pointer;
}
.world-card.available:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-card);
}
.world-card.soon {
  opacity: 0.55;
}
.world-card-link {
  position: absolute;
  inset: 0;
  border-radius: 8px;
}
.world-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 0.4rem;
}
.world-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.4rem;
}
.world-desc {
  font-size: 12px;
  color: var(--para);
  line-height: 1.5;
  margin: 0 0 0.6rem;
}
.world-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.wtag {
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-ui);
}
.wtag-available { background: #e1f5ee; color: #085041; }
.wtag-soon      { background: var(--surface); color: var(--muted); }
.wtag-topic     { background: #e6f1fb; color: #0c447c; }
.wtag-amber     { background: #faeeda; color: #633806; }
.wtag-purple    { background: #eeedfe; color: #3c3489; }

/* dark-mode tag overrides so they don't read as pure-white */
:root[data-theme="dark"] .wtag-available { background: #0a2e22; color: #4ade80; }
:root[data-theme="dark"] .wtag-topic     { background: #0c1f35; color: #60a5fa; }
:root[data-theme="dark"] .wtag-amber     { background: #2d1a05; color: #fb923c; }
:root[data-theme="dark"] .wtag-purple    { background: #1a1540; color: #a78bfa; }

/* ── SandpackIsland ────────────────────────────────────────── */
.sandpack-island {
  margin: 2rem 0;
}

.sandpack-island--fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  margin: 0;
  padding: 1rem;
  display: flex;
  flex-direction: column;
}

.sandpack-island--fullscreen .sp-layout {
  /* Let the layout fill the column flex container in fullscreen */
  flex: 1;
  min-height: 0;
}

.sandpack-island__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.sandpack-island__title {
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: 0 1rem;
  color: var(--muted);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sandpack-island__controls {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.sandpack-island__status {
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--accent);
  min-height: 2rem;
  box-shadow: 0 1px 0 var(--border);
}

/* ── Footer ────────────────────────────────────────────────── */
.site-footer {
  --footer-bg: #111118;
  --footer-text: rgba(255, 255, 255, 0.80);
  --footer-muted: rgba(255, 255, 255, 0.38);
  --footer-border: rgba(255, 255, 255, 0.08);

  background: var(--footer-bg);
  color: var(--footer-text);
  border-top: 3px solid var(--accent);
  margin-top: 4em;
}

:root[data-theme="retro"] .site-footer {
  --footer-bg: #050505;
  --footer-text: rgba(0, 255, 65, 0.85);
  --footer-muted: rgba(0, 255, 65, 0.40);
  --footer-border: rgba(0, 255, 65, 0.12);
}

.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 3rem 1.5rem 2.5rem;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Column: Navigate */
.footer-col--links {}

/* Column: Brand */
.footer-col--brand {
  text-align: center;
}

/* Column: Credit */
.footer-col--credit {
  text-align: right;
}

/* Section labels */
.footer-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-muted);
  margin: 0 0 1rem;
}

/* Nav links */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.footer-nav a {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--footer-text);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-nav a:hover {
  color: var(--accent);
}

/* Logo */
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 0.85rem;
  text-shadow: var(--glow-link);
}
.footer-logo:hover {
  color: var(--accent-hover);
}
.footer-logo .ph {
  font-size: 1.2em;
}

/* About paragraph */
.footer-about {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--footer-muted);
  margin: 0;
  max-width: 320px;
  margin-inline: auto;
}

/* Credit block */
.footer-credit {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--footer-text);
  margin: 0 0 0.85rem;
}
.footer-credit a {
  color: var(--accent);
  text-decoration: none;
}
.footer-credit a:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* Copyright */
.footer-copy {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--footer-muted);
  line-height: 1.6;
  margin: 0;
}

/* Responsive: stack on narrow screens */
@media (max-width: 640px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: left;
  }
  .footer-col--brand,
  .footer-col--credit {
    text-align: left;
  }
  .footer-about {
    margin-inline: 0;
  }
}