@font-face {
    font-family: Cinzel;
    src: url('/assets/Cinzel.ttf') format('truetype');
    font-display: swap;
}

:root {
    --board-ink: #2c2118;
    --board-muted: #604b39;
    --board-link: #754021;
    --board-edge: #b99b7e;
    --board-paper: #f7eee2;
    --board-card: #fff8ee;
    --board-dark: #291d16;
    --board-gold: #f0c690;
}

html, body { color: var(--board-ink); background: #191410; }
body { font-family: system-ui, sans-serif; }
a { color: var(--board-link); }
a:hover { color: #542819; text-decoration: underline; }
:focus-visible { outline: 2px solid #9a4f22; outline-offset: 3px; }

.wrap {
    box-sizing: border-box;
    width: min(100%, 1152px);
    max-width: none;
    min-width: 0;
    margin: 0 auto;
    padding: 16px;
    border-color: #65503d;
    border-radius: 6px;
    background: var(--board-paper);
}

.headerbar {
    position: relative;
    margin: 0;
    padding: clamp(18px, 4vw, 34px) clamp(14px, 3vw, 28px);
    border: 1px solid #62472e;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #1b130e 0%, #21170fea 52%, #21170fa8 100%),
        url('/assets/gates.webp') 50% 47% / cover, var(--board-dark);
}

#site-description { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 22px; width: 72%; }
#site-description .logo { display: block; float: none; flex: 0 0 auto; padding: 0; margin: 0; }
.site_logo {
    display: block;
    width: clamp(100px, 14vw, 166px);
    height: auto;
    aspect-ratio: 760 / 332;
    background: url('/assets/rykin2.webp') center / contain no-repeat;
}
#site-description h1 { margin: 0; color: #fff3e4; font: 700 clamp(18px, 2.5vw, 30px)/1.2 Cinzel, Georgia, serif; }
#site-description > p:not(.skiplink) { margin: 6px 0 0; color: #f3dbc1; font-size: 13px; line-height: 1.45; }
.search-header { margin: 22px 0 0; box-shadow: none; }
.headerbar a:focus-visible { outline-color: var(--board-gold); }

.navbar { margin-bottom: 12px; border: 1px solid var(--board-edge); border-top: 0; background: #eee0d0; }
.navbar a, .navbar .icon { color: #674127; }
.navbar .dropdown-contents, .dropdown-extended .header, .dropdown-extended .footer { background: var(--board-card); color: var(--board-ink); }
#nav-main > li, #nav-breadcrumbs > li { padding-block: 3px; }

.community-account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin: 12px 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--board-edge);
    border-left: 3px solid #9c5d30;
    background: var(--board-card);
    font-size: 13px;
}
.community-account p { margin: 0; }
.community-account-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.community-account-links a { display: inline-flex; align-items: center; min-height: 38px; font-weight: 650; }
.community-account-links .community-primary {
    padding: 0 13px;
    border: 1px solid #684026;
    border-radius: 3px;
    color: #fff7e8;
    background: #633a23;
}
.community-account-links .community-primary:hover { background: #4d2b1a; }

.forabg, .forumbg {
    margin-bottom: 12px;
    padding: 0 1px 1px;
    border: 1px solid #7b5940;
    border-radius: 4px;
    background: var(--board-dark);
}
li.header { padding: 8px 6px; }
li.header dl, li.header dt, li.header dd, li.header a { color: #f9e8d4; }
li.header dt a { font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 1.12em; }
li.header a:focus-visible { outline-color: var(--board-gold); }
ul.forums, li.row, .bg1 { background: var(--board-card); }
.bg2, li.row:hover, ul.topiclist li.row:hover { background: #f1e2d1; }
li.row { padding-block: 4px; border-color: #d5bfa9; }
li.row dt, li.row dd { color: var(--board-muted); }
li.row dd { border-color: #e4d0bb; }
a.forumtitle, a.topictitle { color: #62371f; }
a.forumtitle:hover, a.topictitle:hover, a.subforum:hover { color: #482314; }
a.subforum { color: var(--board-link); }
dl.row-item dt .list-inner { font-size: 1.04em; }

h2, h3, h4, .content, .postbody, .postbody h3, .panel, .stat-block p, fieldset dl dt label { color: var(--board-ink); }
h2, h3 { border-color: var(--board-edge); }
.panel, .bg3, #cp-main .panel, .post { background-color: var(--board-card); }
#login .panel { border: 1px solid var(--board-edge); padding: 16px; }
#login .login-title { color: var(--board-ink); font-size: 1.5em; font-weight: 650; line-height: 1.3; margin-bottom: 12px; }
.error { color: #a01918; }
.inputbox, select, textarea { color: var(--board-ink); border-color: #8c6b50; background: #fffdf8; }
.inputbox:hover, .inputbox:focus { border-color: #8a4928; color: var(--board-ink); }
.button, a.button, input.button1, input.button2, a.button1, a.button2 {
    color: #512e1b;
    border-color: #927052;
    background: #f5e4ce;
    box-shadow: none;
    text-shadow: none;
}
.button:hover, a.button:hover, input.button1:hover, input.button2:hover, a.button1:hover, a.button2:hover {
    color: #452311;
    border-color: #7b482b;
    background: #efcfaa;
}
.button .icon, .icon { color: #765034; }
#login input.button1 {
    min-height: 40px;
    padding-inline: 14px;
    border-color: #684026;
    color: #fff7e8;
    background: #633a23;
}
#login input.button1:hover { background: #4d2b1a; }
.rules { background: #f5dfcf; color: #722919; }
hr, .signature, .postprofile, .postprofile dd, .postprofile dt { border-color: var(--board-edge); }
.copyright, .copyright a, .footer-row, .footer-link { color: var(--board-muted); }

@media (max-width: 760px) {
    .wrap { padding: 8px; }
    .headerbar, .navbar, .forabg, .forumbg, .post, .panel { margin-inline: 0; }
    #site-description { width: 100%; gap: 4px 12px; }
    #site-description h1 { display: block; }
    #site-description > p:not(.skiplink) { display: block; flex-basis: 100%; }
    .community-account-links a { min-height: 44px; }
    #nav-main a[href$='?p=register'] span, #nav-main a[href*='mode=login'] span { display: inline; }
    #nav-main a[href$='?p=register'] i, #nav-main a[href*='mode=login'] i { display: none; }
    #login input[type='text'], #login input[type='password'] {
        box-sizing: border-box;
        width: 100%;
        max-width: 28rem;
        min-height: 44px;
    }
    #login dl:has(input[type='checkbox']) > dt, #login dl:has(input[type='submit']) > dt { display: none; }
    #login input.button1, #login .button2 { min-height: 44px; }
    #login .button2 { display: inline-flex; align-items: center; padding-inline: 14px; }
}

@media (max-width: 520px) {
    #site-description { justify-content: center; }
    #site-description h1 { flex-basis: 100%; text-align: center; }
    #site-description > p:not(.skiplink) { text-align: center; }
    .headerbar { background-position: center, 62% center; }
}