/* Dungeoneering Crew — static journal (parchment & ink). No framework, no CMS. */

@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Spectral:ital,wght@0,400;0,500;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --parchment: #ece3cf; --paper: #f5efe0; --ink: #2a2118; --ink-muted: #6b5e49;
  --accent: #2e6e63; --accent-dark: #255b52; --hairline: #cfc2a6;
}
html[data-theme="dark"] {
  --parchment: #15110b; --paper: #1e1a12; --ink: #e9dfc8; --ink-muted: #a99c81;
  --accent: #5fb3a1; --accent-dark: #7fcbba; --hairline: #372f22;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--parchment); color: var(--ink);
  font-family: 'Spectral', Georgia, 'Times New Roman', serif; font-size: 1.05rem; line-height: 1.65; }
h1, h2, h3, h4 { font-family: 'Marcellus', Georgia, serif; font-weight: 400; line-height: 1.25; }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
a:hover { color: var(--accent-dark); }
img { max-width: 100%; height: auto; }

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 1.25rem; }

/* header */
.site-header { background: var(--paper); border-bottom: 1px solid var(--hairline); }
.site-header .wrap { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.25rem; }
.site-title { font-family: 'Marcellus', serif; font-size: 1.4rem; letter-spacing: .04em; color: var(--ink); text-decoration: none; margin-right: auto; }
.site-title:hover { color: var(--accent); }
.site-header nav a { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--ink-muted); text-decoration: none; }
.site-header nav a:hover { color: var(--accent); }

/* page shell */
.dc-page { padding: 1.75rem 1.25rem 3rem; }
.dc-crumbs { font-family: 'IBM Plex Mono', monospace; font-size: .78rem; letter-spacing: .03em; color: var(--ink-muted); margin-bottom: 1.4rem; }
.dc-crumbs a { color: var(--ink-muted); text-decoration: none; }
.dc-crumbs a:hover { color: var(--accent); }
.dc-crumbs span { color: var(--ink); }

.dc-cover { display: block; width: 100%; height: auto; border: 1px solid var(--hairline); border-radius: 4px; margin: 0 0 1.75rem; }
.dc-title { margin: 0 0 1rem; font-size: 2rem; }
.dc-date { font-family: 'IBM Plex Mono', monospace; font-size: .8rem; letter-spacing: .03em; color: var(--ink-muted); margin: -.5rem 0 1.5rem; }
.dc-body { margin-bottom: 2rem; }
.dc-body img { border: 1px solid var(--hairline); border-radius: 4px; margin: 1rem 0; }
.dc-body hr { border: none; border-top: 1px solid var(--hairline); margin: 1.5rem 0; }

/* listings */
.dc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.dc-list a { display: block; padding: .85rem 1.1rem; background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 3px; color: var(--ink); font-family: 'Marcellus', serif; font-size: 1.15rem; text-decoration: none;
  transition: border-color .15s ease, transform .15s ease; }
.dc-list a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.dc-search-ctx { color: var(--ink-muted); font-size: .82rem; font-family: 'IBM Plex Mono', monospace; }

/* prev / next */
.dc-session-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem;
  padding-top: 1.2rem; border-top: 1px solid var(--hairline); font-family: 'IBM Plex Mono', monospace; font-size: .8rem; }
.dc-session-nav a { color: var(--accent); text-decoration: none; }
.dc-session-nav .dc-next { margin-left: auto; text-align: right; }

/* toolbar (search + export buttons) */
.dc-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: 0 0 1.5rem; }
.dc-search { display: flex; gap: .5rem; align-items: center; flex: 1 1 18rem; }
.dc-search input { flex: 1 1 auto; padding: .5rem .75rem; font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 4px; }
.dc-search input:focus { outline: none; border-color: var(--accent); }
.dc-btn { font: inherit; cursor: pointer; padding: .5rem 1rem; color: var(--paper); background: var(--accent);
  border: 1px solid var(--accent); border-radius: 4px; text-decoration: none; white-space: nowrap; }
.dc-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: var(--paper); }
.dc-btn-ghost { color: var(--accent); background: none; }
.dc-btn-ghost:hover { color: var(--paper); background: var(--accent); }

.dc-results { margin: 0 0 1.5rem; }
.dc-search-head { color: var(--ink-muted); font-style: italic; margin: 0 0 .75rem; }
.dc-back-search { font-family: 'IBM Plex Mono', monospace; font-size: .82rem; margin: 0 0 1.25rem; }
.dc-back-search a { color: var(--accent); text-decoration: none; }

/* export panel */
.dc-export { background: var(--paper); border: 1px solid var(--accent); border-radius: 6px; padding: 1rem 1.1rem; margin: 0 0 1.75rem; }
.dc-export-head { margin: 0 0 .75rem; color: var(--ink-muted); font-style: italic; }
.dc-export-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.dc-export textarea { width: 100%; height: 18rem; resize: vertical; padding: .6rem;
  font-family: 'IBM Plex Mono', monospace; font-size: .8rem; color: var(--ink); background: var(--parchment);
  border: 1px solid var(--hairline); border-radius: 4px; }

/* footer + theme toggle */
footer { border-top: 1px solid var(--hairline); margin-top: 2rem; padding: 1.5rem 1.25rem; color: var(--ink-muted); font-size: .85rem; text-align: center; }
#theme-toggle { position: fixed; bottom: 1.1rem; right: 1.1rem; z-index: 1000; width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--hairline); background: var(--paper);
  color: var(--ink); font-size: 1.15rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px -6px rgba(0,0,0,.45); }
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }