/* File:        styles.css
   Author:      Zackary Galvin
   Date:        March 29, 2026


 Colors Wahoo this took awhile to get right please dont touch em grimdark fonts bc their cool*/
:root {
    --color-bg:          #0a0a0a;        
    --color-surface:     #111111;       
    --color-surface-alt: #1a1a1a;         
    --color-border:      #3a3a3a;        
    --color-accent:      #cc2222;       
    --color-accent-gold: #a8a8b8;        
    --color-text:        #c0c0c0;         
    --color-text-muted:  #707070;         
    --color-heading:     #e8e8e8;         
    --color-highlight:   #1f1010;        
    --color-nav-bg:      #080808;        
    --color-footer-bg:   #050505;         

    --font-display:  'Georgia', 'Times New Roman', serif;
    --font-body:     'Palatino Linotype', 'Palatino', 'Book Antiqua', Georgia, serif;
    --grid-gap:  20px;
    --radius:    4px;}
html {box-sizing: border-box;font-size: 16px;}
*, *::before, *::after {box-sizing: inherit;}
/* background and font format*/
body {margin: 0;padding: 0; background-color: var(--color-bg);color: var(--color-text);
    font-family: var(--font-body);font-size: 1rem;line-height: 1.75;}
/* Header*/
header {background-color: #0b0d12; border-bottom: 2px solid var(--color-accent-gold);
    padding: 28px 40px; text-align: center;}
.header-inner {display: flex; align-items: center;
    justify-content: center;gap: 24px;}
/* Icon format*/
.header-emblem {color: var(--color-accent-gold);font-size: 2rem;opacity: 0.7;}
/* Page title*/
header h1 {margin: 0; font-family: var(--font-display);
    font-size: 2.6rem;font-weight: normal;letter-spacing: 0.12em;
    color: var(--color-heading);text-transform: uppercase;}
.header-subtitle {margin: 6px 0 0 0;font-size: 0.85rem;
letter-spacing: 0.18em;color: var(--color-accent-gold);text-transform: uppercase;}
/*nav list styles*/
nav {background-color: var(--color-nav-bg);border-bottom: 1px solid var(--color-border);padding: 0 40px;}
nav ul {list-style: none;margin: 0;padding: 0;display: flex;
justify-content: center;flex-wrap: wrap-gap: 0;}nav ul li {margin: 0;}
nav a {display: block;padding: 14px 22px;color: var(--color-accent);
    text-decoration: none;font-family: var(--font-display);font-size: 0.85rem;
    letter-spacing: 0.14em;text-transform: uppercase;border-bottom: 3px solid transparent;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;}
nav a:hover {color: var(--color-accent-gold);border-bottom-color: var(--color-accent-gold);background-color: rgba(200, 169, 110, 0.07);}
/*Css grid layout*/
.page-grid {display: grid; grid-template-columns: 280px 1fr; gap: var(--grid-gap);
	border: 2px solid var(--color-border);outline: 2px solid var(--color-accent);
    outline-offset: -2px; max-width: 1200px;
    margin: var(--grid-gap) auto; padding: var(--grid-gap);
    background-color: var(--color-border);}
/* Sidecar */
aside.sidebar {display: flex; flex-direction: column; gap: var(--grid-gap);background-color: var(--color-bg);  }
/* === Sidebar card , accent stripe letter spacing, all caps === */
.sidebar-card {background-color: var(--color-surface);
    border: 1px solid var(--color-border);border-top: 3px solid var(--color-accent-gold);
    padding: 18px;border-radius: var(--radius);}
.sidebar-card h3 {margin: 0 0 12px 0;font-family: var(--font-display);font-size: 0.85rem;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-accent-gold);
    border-bottom: 1px solid var(--color-border); padding-bottom: 8px;}
/* Data table , call gaps, row seperation, bold header removed*/
.data-table { width: 100%;border-collapse: collapse;font-size: 0.82rem;}
.data-table tr {border-bottom: 1px solid var(--color-border);}
.data-table th {text-align: left;color: var(--color-text-muted);font-weight: normal;padding: 5px 6px 5px 0;width: 45%;}
.data-table td {color: var(--color-text);padding: 5px 0;}
/*--sidebar linkage, bullet points pulled, link divided, clickable area, underline when hover and smoothing*/
.sidebar-links {list-style: none; margin: 0;padding: 0;}
.sidebar-links li {border-bottom: 1px solid var(--color-border);}
.sidebar-links a {display: block;padding: 7px 4px;color: var(--color-accent);
    text-decoration: none;font-size: 0.88rem;transition: color 0.2s, padding-left 0.2s;}
.sidebar-links a:hover {color: var(--color-accent-gold);padding-left: 10px;}
/* Ze quotage, gold strip ovveride, italics, read spacing, dimming*/
.quote-card {border-top-color: var(--color-accent) !important;}
.quote-card blockquote {margin: 0 0 10px 0;font-style: italic; font-size: 0.85rem;color: var(--color-text); line-height: 1.6;}
.quote-card cite {font-size: 0.78rem;color: var(--color-text-muted);}
/*main layout vertical stacking sections each divided and a removal of the final divider*/
main {background-color: var(--color-bg); display: flex;flex-direction: column;gap: 0;}
section {padding: 30px 32px;border-bottom: 1px solid var(--color-border);}
section:last-child {border-bottom: none;}
/* Section headings */
section h2 {margin: 0 0 16px 0;font-family: var(--font-display);
font-size: 1.45rem;font-weight: normal;color: var(--color-heading);letter-spacing: 0.06em;
text-transform: uppercase;border-left: 4px solid var(--color-accent-gold);padding-left: 14px;}
section h3 {margin: 20px 0 10px 0;font-family: var(--font-display);font-size: 1.1rem;
font-weight: normal;color: var(--color-accent);letter-spacing: 0.04em;}
section h4 {margin: 0 0 6px 0;font-family: var(--font-display);font-size: 0.95rem;
color: var(--color-accent-gold);letter-spacing: 0.06em;}
section p {margin: 0 0 14px 0;}
img {max-width: 100%; height: auto; display: block;border: 1px solid var(--color-border); border-radius: var(--radius);}
.content-with-image {display: flex; gap: 24px; align-items: flex-start;}
.content-with-image .text-block {flex: 1;}
.image-figure {flex: 0 0 220px;margin: 0;}
.image-figure img {width: 100%;}
.image-figure figcaption {margin-top: 6px;font-size: 0.75rem;
color: var(--color-text-muted);text-align: center;font-style: italic;}
.highlight-box {background-color: var(--color-highlight);
border-left: 4px solid var(--color-accent); padding: 16px 20px;margin: 0 0 20px 0;border-radius: 0 var(--radius) var(--radius) 0;}
.highlight-box p {margin: 0;font-size: 0.96rem;} abilities-grid {display: grid;grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 16px;}
.ability-card {background-color: var(--color-surface-alt);border: 1px solid var(--color-border);border-radius: var(--radius); padding: 14px 16px;}
.ability-card p {margin: 0; font-size: 0.88rem; color: var(--color-text-muted);}
/* Character list */
ul.character-list {margin: 14px 0 0 0;padding-left: 20px;}
ul.character-list li {margin-bottom: 8px;font-size: 0.92rem;}
/* Relic list */
ul.relic-list {padding-left: 20px;}
ul.relic-list li {margin-bottom: 10px;}
/*Footer styles */
footer {background-color: var(--color-footer-bg);border-top: 2px solid var(--color-accent-gold);
text-align: center;padding: 24px 40px;font-size: 0.82rem;color: var(--color-text-muted);}
footer p {margin: 6px 0;}
footer a {color: var(--color-accent);text-decoration: none;letter-spacing: 0.08em;}
footer a:hover {color: var(--color-accent-gold);text-decoration: underline;}
strong {color: var(--color-heading);font-weight: bold;}