:root {
  --bg: #f6efe6;
  --panel: #fff7ee;
  --muted: #6b4f3a;
  --muted-strong: #4f3726;
  --focus: #b85a3f;
  --accent: #b85a3f;
  --accent-2: #7b6f4f;
  --shadow: rgba(34, 20, 10, 0.08);
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%23f6efe6"/><circle cx="1" cy="1" r="0.5" fill="%23efe6dd"/></svg>');
  --card-bg-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 250, 244, 0.95));
  color-scheme: light;
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  --radius: 6px;
}

:root[data-theme="autumn"],
html[data-theme="autumn"] {
  --bg: #2b1f18;
  --panel: #36261f;
  --muted: #f1e6dd;
  --muted-strong: #e8dccf;
  --accent: #e07a5f;
  --accent-2: #8aa174;
  --focus: #e07a5f;
  --shadow: rgba(0, 0, 0, 0.6);
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4"><rect width="4" height="4" fill="%232b1f18"/><circle cx="1" cy="1" r="0.5" fill="%2336281f"/></svg>');
  --card-bg-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
  color-scheme: dark;
}

/* base / layout */
* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent), var(--grain);
  color: var(--muted);
  -webkit-font-smoothing: antialiased;
  padding: 28px;
  line-height: 1.6;
  font-size: 16px;
  transition: background-color .18s ease, color .18s ease;
}

.container {
  max-width: 980px;
  margin: 0 auto;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 8px 24px var(--shadow);
  background: var(--panel);
  background-image: var(--grain);
}

/* skip link (visible on focus) */
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  background: #000;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 1000;
  transform: translateY(-120%);
  transition: transform .18s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
}

/* header centered */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 18px;
}

h1 {
  font-size: 26px;
  margin: 0;
  font-weight: 600
}

.lead {
  margin: 6px 0 0;
  color: var(--accent-2);
  font-size: 14px;
  max-width: 56ch
}

/* theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px
}

.theme-toggle button {
  background: #7b6f4f;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* grid layout */
.layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  margin-top: 18px
}

nav.sidebar {
  background: var(--panel);
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(0, 0, 0, 0.03);
}

.navlist {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px
}

.navlist li {
  margin-bottom: 8px
}

.navlist a {
  color: var(--accent);
  text-decoration: none;
  padding: 4px;
  border-radius: 4px;
  display: inline-block;
}

.navlist a:hover,
.navlist a:focus {
  text-decoration: underline;
  outline: none;
}

/* mark current page */
.navlist a.current {
  font-weight: 700;
  color: var(--muted-strong);
}

/* main area */
main.card {
  background: var(--card-bg-gradient);
  padding: 14px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.03);
  min-height: 220px;
}

section.block {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.03)
}

section.block:last-child {
  border-bottom: none
}

.muted {
  color: var(--accent-2);
  font-size: 13px
}

/* footer */
footer {
  margin-top: 18px;
  padding-top: 8px;
  font-size: 13px;
  color: var(--accent-2);
  text-align: center
}

/* focus styles for keyboard users */
:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 40%, transparent);
}

/* small-screen nav toggle */
.nav-toggle {
  display: none;
  margin-bottom: 8px
}

@media (max-width:760px) {
  .layout {
    grid-template-columns: 1fr
  }

  .nav-toggle {
    display: block
  }

  nav.sidebar {
    display: none
  }

  nav.sidebar.open {
    display: block
  }

  .theme-toggle {
    margin-top: 4px
  }

  body {
    padding: 14px
  }

  .container {
    padding: 12px
  }

  main.card {
    min-height: 180px
  }

  header {
    margin-bottom: 12px
  }

  h1 {
    font-size: 22px
  }
}

.nav-toggle {
  background: #7b6f4f;
  border: 1px solid rgb(0, 0, 0);
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}

/* Category badges */
.link-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  vertical-align: text-bottom;
}

.badge-tools { background-color: #b85a3f; color: #fff; }
.badge-learning { background-color: #7b6f4f; color: #fff; }
.badge-creative { background-color: #e07a5f; color: #fff; }
.badge-social { background-color: #8aa174; color: #fff; }
.badge-misc { background-color: #6b4f3a; color: #fff; }