/* ── VARIABLES ── */
:root {
  --cream:        #f5ead6;
  --parchment:    #e8d5b0;
  --brown-dark:   #2a1a0e;
  --brown-mid:    #5c3d1e;
  --brown-light:  #8b5e2e;
  --green:        #2d4a1e;
  --green-light:  #4a7a2f;
  --red:          #8b1a1a;
  --gold:         #c9962a;
  --gold-light:   #e8b84b;
  --ink:          #1a1008;
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background-color: var(--cream);
  color: var(--ink);
  font-family: 'Crimson Text', Georgia, serif;
  min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9962a' fill-opacity='0.06'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.15'/%3E%3C/svg%3E");
}
.page-wrap { position: relative; z-index: 1; }

/* ── BANNER ── */
.banner { background: var(--green); border-bottom: 6px double var(--gold); position: relative; overflow: hidden; }
.banner::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,0.06) 10px, rgba(0,0,0,0.06) 11px);
}
.banner-text { flex: 1; }
.banner-back {
  font-family: 'Rye', serif; font-size: 0.58rem; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--gold-light); text-decoration: none;
  opacity: 0.7; display: inline-block; margin-bottom: 8px;
}
.banner-back:hover { opacity: 1; }
.banner h1 { font-family: 'Rye', serif; font-size: clamp(1.2rem, 3vw, 1.9rem); color: var(--cream); text-shadow: 2px 2px 0 rgba(0,0,0,0.4); line-height: 1.1; }
.banner h1 span { color: var(--gold-light); }
.banner-sub { margin-top: 5px; font-family: 'Playfair Display', serif; font-style: italic; font-size: 0.85rem; color: var(--parchment); opacity: 0.75; }
.banner-divider { margin-top: 8px; height: 2px; width: 100px; background: linear-gradient(to right, var(--gold), transparent); }

/* ── STATES ── */
.empty-state { text-align: center; padding: 50px 20px; border: 2px dashed var(--brown-mid); border-radius: 2px; }
.empty-state p { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem; color: var(--brown-light); }
.loading-state { text-align: center; padding: 50px 20px; font-family: 'Rye', serif; font-size: 0.65rem; letter-spacing: 0.3em; color: var(--brown-light); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--brown-mid); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.err-state { background: var(--red); border: 1px solid #a02020; color: var(--cream); font-family: 'Crimson Text', serif; font-style: italic; font-size: 0.9rem; padding: 10px 14px; border-radius: 2px; margin-bottom: 12px; }