/* The Fable. Styled after a 2004 game website: black field, outset stone and timber borders,
   Arial at 13px, yellow and orange links. Hand-built; no game assets are used. */
:root {
    --field: #000;
    --panel: #1d1610;
    --panel-2: #2a2016;
    --timber: #382418;
    --stone: #373737;
    --blood: #570700;
    --ink: #fff;
    --dim: #b8ab95;
    --gold: #ffe139;
    --orange: #ffbb22;
    --green: #04a800;
    --lblue: #9db8c3;
    --parch: #e9dcb8;
    --parch-ink: #2b1d0e;
    --parch-edge: #b39b67;
}
* { box-sizing: border-box; }
html { background: var(--field); }
body {
    background: var(--field);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.45;
    margin: 0;
    padding: 12px 16px 40px;
}
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--gold); }
img, svg { max-width: 100%; }

.frame { max-width: 780px; margin: 0 auto; }

/* masthead */
.mast {
    border: 3pt outset var(--blood);
    background: linear-gradient(#3b0a03, #1a0402);
    text-align: center;
    padding: 14px 8px 10px;
}
.mast h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 40px;
    letter-spacing: 3px;
    color: var(--gold);
    text-shadow: 2px 2px 0 #000, 0 0 12px #8a3a00;
    font-weight: normal;
}
.mast .sub { color: var(--dim); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; }

/* nav bar */
.nav {
    border: 3pt outset var(--stone);
    background: #222;
    margin-top: 6px;
    padding: 5px 6px;
    text-align: center;
    font-weight: bold;
}
.nav a { display: inline-block; padding: 2px 8px; color: var(--ink); }
.nav a.on { color: var(--gold); }
.nav a:hover { color: var(--gold); }

/* two-column table layout, as was the custom */
.cols { display: table; width: 100%; border-spacing: 0 6px; margin-top: 2px; }
.cols > .side, .cols > .main { display: table-cell; vertical-align: top; }
.cols > .side { width: 190px; padding-right: 6px; }

.box { border: 2px solid var(--timber); background: var(--panel); margin-bottom: 6px; }
.box h2, .box h3 {
    margin: 0;
    background: var(--timber);
    color: var(--gold);
    font-size: 13px;
    padding: 3px 7px;
    border-bottom: 1px solid #000;
}
.box .in { padding: 7px 9px; }
.box.stone { border: 3pt outset var(--stone); background: #111; }

.stat { width: 100%; border-collapse: collapse; }
.stat td { padding: 2px 0; vertical-align: top; }
.stat td:last-child { text-align: right; color: var(--gold); }

.deeds { list-style: none; margin: 0; padding: 0; }
.deeds li { padding: 4px 0; border-bottom: 1px dotted #4a3a28; overflow-wrap: anywhere; }
.deeds li:last-child { border-bottom: 0; }
.deeds .t { color: var(--dim); font-size: 11px; display: block; }
.k-tribute { color: var(--green); }
.k-title { color: var(--orange); }
.k-chapter { color: var(--gold); }

/* the book */
.parchment {
    background: var(--parch);
    color: var(--parch-ink);
    border: 2px solid var(--parch-edge);
    box-shadow: inset 0 0 40px rgba(120, 80, 20, 0.35);
    padding: 18px 20px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.6;
}
.parchment h2 { font-weight: normal; font-size: 24px; margin: 0 0 4px; text-align: center; color: #5a1a00; }
.parchment .when { text-align: center; font-size: 12px; color: #6b5636; margin-bottom: 14px; font-style: italic; }
.parchment p { margin: 0 0 12px; }
.parchment p:first-of-type::first-letter {
    float: left;
    font-size: 46px;
    line-height: 0.9;
    padding: 4px 6px 0 0;
    color: #7a1500;
}
.parchment a { color: #7a1500; }

/* rolls and ledgers */
table.roll { width: 100%; border-collapse: collapse; }
table.roll th { text-align: left; color: var(--gold); border-bottom: 1px solid var(--timber); padding: 3px 4px; font-size: 12px; }
table.roll td { padding: 4px; border-bottom: 1px dotted #4a3a28; vertical-align: top; overflow-wrap: anywhere; }
table.roll td.n { text-align: right; white-space: nowrap; }
.scroll-x { overflow-x: auto; }

.chapters { list-style: none; padding: 0; margin: 0; }
.chapters li { padding: 6px 0; border-bottom: 1px dotted #4a3a28; }
.chapters .num { color: var(--dim); font-size: 11px; }

.quiet { color: var(--dim); font-style: italic; }
.blink { animation: blink 1.2s steps(2, start) infinite; color: var(--gold); }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }

.badges { text-align: center; margin-top: 14px; }
.badges img { margin: 2px; image-rendering: pixelated; vertical-align: middle; }
.foot { text-align: center; color: #777; font-size: 11px; margin-top: 8px; }
.foot a { color: #999; }

hr.rule { border: 0; border-top: 2px groove #4a3a28; margin: 10px 0; }

/* phones: the side column folds under the main one */
@media (max-width: 640px) {
    body { padding: 8px 16px 32px; }
    .mast h1 { font-size: 30px; letter-spacing: 2px; }
    .cols, .cols > .side, .cols > .main { display: block; width: auto; }
    .cols > .side { padding-right: 0; }
    .parchment { padding: 14px; font-size: 14px; }
    .nav a { padding: 2px 5px; }
}