/* Font tags (with preconnect) live in each page's now instead of an
@import here — @import blocks rendering until this whole stylesheet loads before
the browser even discovers the font request; a is discovered immediately
by the preload scanner and fetched in parallel. */
* { box-sizing: border-box; }
:root {
--stone-dark: #171613;
--stone: #232019;
--stone-light: #302b22;
--panel: #22201b;
--panel-border: #4a3f2c;
--gold: #d4af37;
--gold-bright: #f0d78c;
--gold-dim: #8b6914;
--ink: #e9e0c8;
--ink-dim: #a89a78;
--blue-deep: #0f3d6e;
--blue-bright: #4a9fe0;
}
body {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 20px;
margin: 0;
color: var(--ink);
background: var(--stone-dark);
background-image:
radial-gradient(ellipse at 20% 10%, rgba(212,175,55,0.04), transparent 40%),
radial-gradient(ellipse at 80% 90%, rgba(74,159,224,0.05), transparent 40%),
repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, transparent 2px, transparent 4px),
linear-gradient(180deg, #1a1814, #17161380 40%, #171613);
}
a { color: var(--blue-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, .fantasy-heading {
font-family: 'Cinzel', 'Cormorant Garamond', serif;
color: var(--gold-bright);
letter-spacing: 0.02em;
font-weight: 700;
}
.banner-wrap {
text-align: center;
padding: 18px 20px 0;
background: linear-gradient(180deg, #100f0d, var(--stone-dark));
}
.banner-wrap img { max-width: 100%; height: auto; max-height: 220px; }
.header {
text-align: center;
padding: 4px 20px 20px;
border-bottom: 2px solid var(--gold-dim);
background: linear-gradient(180deg, var(--stone-dark), var(--stone));
position: sticky;
top: 0;
z-index: 10;
}
.header h1 {
margin: 0;
font-size: 26px;
text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.header .sub {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
color: var(--ink-dim);
font-size: 15px;
margin-top: 6px;
}
label { display: block; margin-top: 16px; font-size: 15px; color: var(--gold); font-weight: 600; letter-spacing: 0.02em; }
input[type=text], textarea {
width: 100%;
background: #1a1712;
border: 1px solid var(--panel-border);
color: var(--ink);
padding: 10px 14px;
border-radius: 3px;
font-family: 'Cormorant Garamond', serif;
font-size: 17px;
margin-top: 4px;
}
input[type=text]:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold-dim); }
button {
font-family: 'Cinzel', serif;
background: linear-gradient(180deg, var(--gold-bright), var(--gold) 60%, var(--gold-dim));
color: #241d0d;
border: 1px solid #6b4a1a;
padding: 11px 26px;
border-radius: 3px;
font-weight: 700;
font-size: 14px;
letter-spacing: 0.04em;
cursor: pointer;
text-transform: uppercase;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
button:hover { background: linear-gradient(180deg, #fbe6ab, var(--gold-bright) 60%, var(--gold)); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.danger {
background: linear-gradient(180deg, #c96a6a, #8b2e2e 60%, #5c1e1e);
color: #2a0f0f;
border-color: #4a1818;
}
button.danger:hover { background: linear-gradient(180deg, #e08a8a, #a83c3c 60%, #6b2424); }
.hint { font-size: 13px; color: var(--ink-dim); font-weight: 500; margin-top: 4px; }
.empty-state { text-align: center; padding: 60px; color: var(--ink-dim); font-style: italic; }
.panel {
background: var(--panel);
border: 1px solid var(--panel-border);
border-radius: 6px;
box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}