/* =========================================================
   Brandon Lyman — Homepage
   UESP / MediaWiki style + tabbed pages.
   Parchment texture, solid cream windows, palette as a feature.
   Per-page signature color via .theme-* (sets --theme).
   All rules scoped under .uesp so the markup is portable.
   ========================================================= */

html, body { margin: 0; padding: 0; }

.uesp {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #202122;
    min-height: 100vh;
    padding: 14px;
    background-color: #cdbb8b;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.13'/%3E%3C/svg%3E"),
        radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 35%),
        radial-gradient(circle at 82% 58%, rgba(105, 80, 40, 0.18), rgba(105, 80, 40, 0) 42%),
        radial-gradient(circle at 50% 92%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 35%),
        radial-gradient(circle at 92% 24%, rgba(105, 80, 40, 0.14), rgba(105, 80, 40, 0) 34%);
}
.uesp *, .uesp *::before, .uesp *::after { box-sizing: border-box; }
.uesp-inner { max-width: 1280px; margin: 0 auto; }

/* ---------- Palette ---------- */
.uesp {
    --maroon: #C32249;  --maroon-d: #7d1530;
    --blue:   #1494C7;  --blue-d:   #0c6188;
    --ochre:  #CB9D06;  --ochre-d:  #8a6a08;
    --orange: #C74D14;  --orange-d: #8f350d;
}

/* ---------- Links ---------- */
.uesp a { color: var(--blue-d); text-decoration: none; }
.uesp a:visited { color: var(--maroon-d); }
.uesp a:hover { color: var(--orange); text-decoration: underline; }

/* ---------- Layout ---------- */
.uesp .wiki-layout { display: flex; align-items: flex-start; gap: 10px; }
.uesp .sidebar { flex: 0 0 190px; width: 190px; }
.uesp .content { flex: 1 1 auto; min-width: 0; }

/* ---------- Shared window chrome ---------- */
.uesp .logo, .uesp .box {
    background-color: #f6f0de;
    border: 1px solid #a4976f;
    box-shadow: 0 1px 3px rgba(55, 40, 15, 0.28);
    margin-bottom: 12px;
}

/* ---------- Logo placeholder ---------- */
.uesp .logo {
    padding: 14px 8px 12px;
    text-align: center;
    border-top: 4px solid var(--maroon);
}
.uesp .logo-mark {
    display: inline-block;
    padding: 10px 16px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-size: 18px;
    letter-spacing: 2px;
    color: #8a7c54;
    border: 2px dashed #c2b485;
    background-color: #efe7cf;
    background-image: repeating-linear-gradient(45deg, rgba(150, 130, 80, 0.18) 0 6px, rgba(0, 0, 0, 0) 6px 12px);
}
.uesp .logo-name {
    margin-top: 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: bold;
    font-size: 16px;
    color: var(--maroon);
}

/* ---------- Sidebar boxes (colored top accents) ---------- */
.uesp .box { padding: 8px 10px; }
.uesp .box--blue   { border-top: 3px solid var(--blue); }
.uesp .box--ochre  { border-top: 3px solid var(--ochre); }
.uesp .box--orange { border-top: 3px solid var(--orange); }
.uesp .portlet-label {
    margin-bottom: 5px;
    padding-bottom: 2px;
    font-size: 11px;
    color: #5a5440;
    border-bottom: 1px solid #cdc09c;
}
.uesp .search-row { display: flex; gap: 4px; }
.uesp .search-input { flex: 1 1 auto; min-width: 0; padding: 3px 5px; font-size: 12px; border: 1px solid #9b927a; background-color: #fff; }
.uesp .search-btn { padding: 3px 8px; font-size: 12px; cursor: pointer; border: 1px solid #9b927a; background-color: #e8dfc4; }
.uesp .portlet-list { list-style: none; margin: 0; padding: 0; }
.uesp .portlet-list li { position: relative; padding: 3px 0 3px 13px; font-size: 13px; line-height: 1.4; word-break: break-word; }
.uesp .portlet-list li::before { content: "\25AA"; position: absolute; left: 0; top: 2px; color: #4a4636; font-size: 10px; }

/* ---------- Tabs (one color per page) ---------- */
.uesp .tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 4px; }
.uesp .tab {
    font-family: inherit;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    color: var(--tc);
    background-color: #f3ecd8;
    border: 1px solid #a4976f;
    border-top: 3px solid var(--solid);
    border-bottom: none;
}
.uesp .tab--maroon { --tc: #9c1a3a; --solid: var(--maroon); }
.uesp .tab--blue   { --tc: #0c6188; --solid: var(--blue); }
.uesp .tab--ochre  { --tc: #7e6107; --solid: var(--ochre); }
.uesp .tab--orange { --tc: #a53d10; --solid: var(--orange); }
.uesp .tab:hover { background-color: #faf4e2; }
.uesp .tab.is-active {
    color: #fff;
    background-color: var(--solid);
    border-color: var(--solid);
}
.uesp .tab--ochre.is-active { color: #3a2c00; }

/* ---------- Panels ---------- */
.uesp .panel[hidden] { display: none; }
.uesp .theme-maroon { --theme: var(--maroon); }
.uesp .theme-blue   { --theme: var(--blue); }
.uesp .theme-ochre  { --theme: var(--ochre); }
.uesp .theme-orange { --theme: var(--orange); }

.uesp .content-region {
    padding: 16px 20px 24px;
    background-color: #f0e9d3;
    border: 1px solid #a4976f;
    border-top: 4px solid var(--theme, #a4976f);
    box-shadow: 0 1px 3px rgba(55, 40, 15, 0.28);
}

/* ---------- Headings ---------- */
.uesp h1 {
    font-size: 26px;
    font-weight: normal;
    color: #000;
    padding-bottom: 4px;
    margin: 0 0 6px;
    border-bottom: 2px solid var(--theme, #a4976f);
}
.uesp .subtitle { margin-bottom: 16px; font-size: 13px; font-style: italic; color: #5a5440; }
.uesp h2 {
    font-size: 19px;
    font-weight: normal;
    color: #000;
    padding-bottom: 3px;
    margin: 22px 0 9px;
    border-bottom: 2px solid var(--theme, #a4976f);
}
.uesp h2::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 9px;
    background-color: var(--theme, #a4976f);
    position: relative;
    top: 1px;
}
.uesp h3 { font-size: 14px; font-weight: bold; margin: 13px 0 5px; }

/* ---------- Sub-windows (welcome, news) ---------- */
.uesp .subbox { padding: 12px 14px; margin-bottom: 16px; background-color: #fcf9ef; border: 1px solid #b3a884; }
.uesp .subbox h2 { margin-top: 0; }
.uesp .facts p { margin: 3px 0; font-size: 13px; }
.uesp .search-big { display: flex; gap: 6px; max-width: 520px; margin: 12px auto 2px; }
.uesp .search-big input { flex: 1 1 auto; min-width: 0; padding: 6px 9px; font-size: 14px; border: 1px solid #9b927a; background-color: #fff; }
.uesp .search-big button { padding: 6px 16px; font-size: 14px; font-weight: bold; cursor: pointer; border: 1px solid #9b927a; background-color: #e8dfc4; }
.uesp .navrow { margin-top: 10px; padding-top: 8px; text-align: center; font-size: 13px; border-top: 1px solid #d8cca8; }
.uesp .navrow a { font-weight: bold; }

/* ---------- Latest News placeholders ---------- */
.uesp .news-head { font-weight: bold; }
.uesp .news-date { color: #5a5440; font-weight: normal; }
.uesp .placeholder { color: #8a7f63; font-style: italic; }

/* ---------- CV lists ---------- */
.uesp .cv-list { list-style: square; padding-left: 24px; margin: 0; }
.uesp .cv-list li { margin-bottom: 7px; line-height: 1.5; font-size: 13.5px; }
.uesp .cv-list li::marker { color: var(--theme, #4a4636); }
.uesp .yr { color: var(--ochre-d); }
.uesp .pub-list { padding-left: 26px; margin: 0; }
.uesp .pub-list li { margin-bottom: 8px; line-height: 1.5; font-size: 13.5px; }
.uesp .pub-list li::marker { color: #5a5440; }
.uesp .pub-list strong { color: #000; }
.uesp .pub-list a { word-break: break-word; }
.uesp .skills-line { font-size: 13.5px; }

/* ---------- Game Design tile grid ---------- */
.uesp .tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 16px;
    margin-top: 10px;
}
.uesp .tile { display: block; text-align: center; text-decoration: none; }
.uesp .tile-box {
    display: block;
    aspect-ratio: 1 / 1;
    border: 2px solid;
    box-shadow: 0 1px 3px rgba(55, 40, 15, 0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.uesp .tile:hover .tile-box { transform: translateY(-3px); box-shadow: 0 6px 14px rgba(55, 40, 15, 0.4); }
.uesp .tile:active .tile-box { transform: translateY(-1px); }
.uesp .tile-cap { display: block; margin-top: 7px; font-size: 12.5px; font-weight: bold; color: #5a5440; }
.uesp .tile--maroon .tile-box { background-color: var(--maroon); border-color: var(--maroon-d); }
.uesp .tile--blue   .tile-box { background-color: var(--blue);   border-color: var(--blue-d); }
.uesp .tile--ochre  .tile-box { background-color: var(--ochre);  border-color: var(--ochre-d); }
.uesp .tile--orange .tile-box { background-color: var(--orange); border-color: var(--orange-d); }

/* ---------- Footer ---------- */
.uesp .site-footer { margin-top: 10px; padding: 8px; text-align: center; font-size: 11px; color: #4a4326; }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
    .uesp { padding: 8px; }
    .uesp .wiki-layout { flex-direction: column; }
    .uesp .sidebar { flex: 1 1 auto; width: 100%; }
    .uesp .content-region { padding: 14px 14px 20px; }
    .uesp h1 { font-size: 23px; }
    .uesp h2 { font-size: 18px; }
}