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

:root {
  --ink: #0a0806; --deep: #100d0a;
  --parchment: #c4a96e; --parchment-dim: #8a7248; --parchment-pale: #e8d9b8;
  --rust: #8b3a1a; --rust-bright: #c25220;
  --steel: #2a4a4e; --steel-light: #3d6a70;
  --amber: #e8c87a; --amber-dim: #a8883a;
  --font-body: 'Crimson Pro', 'Parastoo', serif;
  --font-heading: 'Cinzel', 'Amiri', serif;
  --font-heading-decor: 'Cinzel Decorative', 'Amiri', serif;
  --font-verse: 'IM Fell English', 'Parastoo', serif;
}

html { background: var(--ink); }
body {
  min-height: 100vh;
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "liga" 1;
  background: radial-gradient(ellipse at 50% -10%, #1d150d 0%, var(--ink) 62%) fixed;
}
body::before { /* faint grain */
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .06; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 56px 22px 90px; }

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--parchment-pale); }
.quiet { color: var(--parchment-dim); font-style: italic; font-size: 16px; }

/* header */
.eyebrow, .meta, .btn, summary, label, .responds {
  font-family: var(--font-heading); text-transform: uppercase;
}
.eyebrow { display: block; color: var(--amber-dim); font-size: 11px; letter-spacing: 4px; margin-bottom: 10px; }
h1 { font-family: var(--font-heading-decor); font-weight: 400; color: var(--parchment); font-size: clamp(32px, 6vw, 48px); line-height: 1.15; margin-bottom: 16px; }
.lede { font-family: var(--font-verse); font-style: italic; color: var(--parchment-pale); font-size: 19px; max-width: 600px; }
nav, .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; }

.btn {
  padding: 8px 18px; background: rgba(10,8,6,.78); border: 1px solid rgba(196,169,110,.38);
  color: var(--parchment-dim); font-size: 10px; letter-spacing: 3px; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
}
.btn:hover, .btn.active { border-color: var(--amber); color: var(--amber); background: rgba(20,14,8,.9); }

main { margin-top: 44px; padding-top: 36px; border-top: 1px solid rgba(196,169,110,.16); }

/* entries and layers */
h2 { font-family: var(--font-heading-decor); font-weight: 400; color: var(--parchment); font-size: clamp(26px, 4vw, 34px); line-height: 1.3; margin: 6px 0 16px; }
h3 { font-family: var(--font-heading); font-weight: 400; color: var(--parchment); font-size: 20px; margin: 4px 0 10px; }
.text { white-space: pre-wrap; color: var(--parchment-pale); font-size: 19px; line-height: 1.75; }
.meta { color: var(--parchment-dim); font-size: 11px; letter-spacing: 2.5px; margin-top: 14px; }

.layer { margin-top: 38px; padding-inline-start: 20px; border-inline-start: 2px solid var(--parchment-dim); }
.layer.counter { border-color: var(--rust-bright); }
.layer.rewrite { border-color: var(--steel-light); }
.responds { color: var(--parchment-dim); font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; }
.layer .text { font-size: 18px; }

blockquote.quote {
  font-family: var(--font-verse); font-style: italic; color: var(--amber-dim); white-space: pre-wrap;
  border-inline-start: 2px solid rgba(232,200,122,.25); padding-inline-start: 14px; margin: 0 0 14px;
}

.redacted {
  background: var(--parchment-dim); color: transparent; cursor: pointer;
  transition: background .25s, color .25s;
}
.redacted.open { background: rgba(139,58,26,.28); color: var(--parchment-pale); }

.refs { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(196,169,110,.16); }
.refs h3 { font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--amber-dim); }
.refs ul { list-style: none; margin-bottom: 18px; }
.refs li { margin: 4px 0; font-size: 17px; }
.refs .note { color: var(--parchment-dim); font-style: italic; }

.toolbar { margin: 40px 0 0; }

/* forms */
.compose { margin-top: 26px; padding: 22px; background: rgba(10,8,6,.97); border: 1px solid rgba(196,169,110,.28); box-shadow: 0 24px 80px rgba(0,0,0,.5); }
.compose h3 { margin-bottom: 14px; }
label { display: block; color: var(--amber-dim); font-size: 10px; letter-spacing: 3px; margin: 16px 0 6px; }
input[type=text], textarea, select {
  width: 100%; background: rgba(196,169,110,.05); border: 1px solid rgba(196,169,110,.28);
  color: var(--parchment-pale); font-family: var(--font-body); font-size: 18px; padding: 10px 12px; outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--amber); }
textarea { min-height: 190px; resize: vertical; line-height: 1.6; }
select option { background: var(--ink); }
.picked { margin-top: 10px; }
.picked .btn { margin-top: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.status { color: var(--rust-bright); font-style: italic; font-size: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

footer { margin-top: 70px; padding-top: 22px; border-top: 1px solid rgba(196,169,110,.16); }
summary { cursor: pointer; color: var(--parchment-dim); font-size: 11px; letter-spacing: 3px; margin-bottom: 14px; }
summary:hover { color: var(--amber); }
#index-list { list-style: none; columns: 2 260px; margin-bottom: 20px; }
#index-list li { break-inside: avoid; margin: 3px 0; font-size: 17px; }
#index-list .count { color: var(--parchment-dim); font-size: 14px; }

::selection { background: rgba(194,82,32,.45); color: var(--parchment-pale); }

@media (max-width: 768px) {
  body { font-size: 18px; }
  .wrap { padding: 36px 16px 70px; }
  .btn { padding: 8px 12px; letter-spacing: 2px; }
}