/* ==================================================
GLOBAL
================================================== */

* {
  box-sizing: border-box;
  }

html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;


background: #1c1410;
color: #e4d6bd;

font-family: Georgia, "Times New Roman", serif;


}

:root {
    /* ==============================================
       CODEX PALETTE
       ============================================== */

    /* Backgrounds */
    --color-background: #0c0a09;
    --color-surface: #0c0a09;
    --color-surface-light: #2b2018;
    --color-surface-hover: #16100c;

    /* Borders */
    --color-border: #493b2c;
    --color-border-light: #5f4f38;

    /* Text */
    --color-text: #d6c6a8;
    --color-text-muted: #9f917c;
    --color-text-faint: #857359;

    /* Accents */
    --color-gold: #9a8150;
    --color-gold-light: #b59a68;
    --color-gold-faint: #806b43;

    /* Additional accents */
    --color-olive: #56513b;
    --color-burgundy: #5b3b36;

    /* Typography */
    --font-display: "Cinzel", serif;
    --font-body: Georgia, "Times New Roman", serif;

    /* Layout */
    --searchbar-height: 76px;
    --sidebar-width: 240px;

    /* Effects */
    --transition-fast: 180ms ease;
}


.codex-heading {
    font-family: "Cinzel", serif;
    font-weight: 500;
    letter-spacing: 2px;
    color: #c2a96a;
}

/* ==================================================
SEARCH BAR
================================================== */

.searchbar {
width: 100%;
height: 76px;


display: flex;
align-items: center;
justify-content: space-between;

padding: 0 28px;

background: #0c0a09;
border-bottom: 1px solid #806b43;


}

/* ==================================================
CODEX BRAND
================================================== */

.searchbar-brand {
display: flex;
align-items: center;
gap: 12px;


color: #c2a96a;

user-select: none;


}

.searchbar-symbol {
font-size: 22px;
line-height: 1;


color: #b59a5d;


}

.searchbar-title {
    font-family: "Cinzel", serif;
    font-size: 15px;
    letter-spacing: 4px;
    font-weight: 600;
}

/* ==================================================
SEARCH
================================================== */

.searchbar-search {
display: flex;
align-items: center;


width: min(420px, 45vw);
height: 40px;

background: #0c0a09;
border: 1px solid #5f4f34;
border-radius: 4px;

transition:
    border-color 180ms ease,
    box-shadow 180ms ease;


}

.searchbar-search:focus-within {
border-color: #a58a52;


box-shadow:
    0 0 0 1px rgba(165, 138, 82, 0.15);


}

/* ==================================================
SEARCH INPUT
================================================== */

.searchbar-search input {
flex: 1;


width: 100%;
height: 100%;

padding: 0 14px;

border: none;
outline: none;

background: transparent;

color: #e4d6bd;

font-family: inherit;
font-size: 14px;


}

.searchbar-search input::placeholder {
color: #85755e;
}

.searchbar-search input:focus::placeholder {
color: #6f604c;
}

/* ==================================================
SEARCH BUTTON
================================================== */

.searchbar-search button {
width: 42px;
height: 100%;


border: none;
border-left: 1px solid #4f422f;

background: transparent;

color: #a58a52;

font-family: inherit;
font-size: 21px;

cursor: pointer;

transition:
    color 180ms ease,
    background-color 180ms ease;


}

.searchbar-search button:hover {
color: #d0b875;
background: #0c0a09;
}

.searchbar-search button:active {
background: #0c0a09;
}

/* ==================================================
ACCESSIBILITY
================================================== */

.visually-hidden {
position: absolute;


width: 1px;
height: 1px;

padding: 0;
margin: -1px;

overflow: hidden;
clip: rect(0, 0, 0, 0);

white-space: nowrap;
border: 0;


}



/* ==================================================
MAIN CONTENT
================================================== */

#main-content-container {
    position: relative;
    isolation: isolate;

    flex: 1;
    min-width: 0;
    height: 100%;

    background: #110e0d;

    overflow-y: auto;
}

#main-content-container::before {
    content: "";

    position: fixed;
    inset: 76px 0 0 240px;

    background-image: url("https://i.pinimg.com/1200x/f9/ed/c2/f9edc2109cf85756e07798328b1a460c.jpg");
    background-size: cover;
    background-position: center;

    opacity: 0.48;

    mix-blend-mode: multiply;

    pointer-events: none;

    z-index: -1;
}

/* ==================================================
HOME
================================================== */

.home {
max-width: 1000px;


margin: 0 auto;
padding: 80px 70px 50px;


}

/* ==================================================
HERO
================================================== */

.home-hero {
text-align: center;
}

.home-symbol {
display: block;


margin-bottom: 18px;

color: #b59a5d;

font-size: 25px;

opacity: 0.9;


}

.home-eyebrow {
margin: 0 0 12px;


color: #806f50;

font-family: "Cinzel", serif;
font-size: 11px;
font-weight: 600;

letter-spacing: 5px;


}

.home h1 {
margin: 0;


color: #c2a96a;

font-family: "Cinzel", serif;
font-size: clamp(32px, 4vw, 48px);
font-weight: 500;

letter-spacing: 2px;


}

.home-introduction {
max-width: 600px;


margin: 22px auto 0;

color: #a99a82;

font-size: 16px;
line-height: 1.8;


}

/* ==================================================
DIVIDER
================================================== */

.home-divider {
display: flex;
align-items: center;
gap: 18px;


max-width: 500px;

margin: 55px auto;


}

.home-divider::before,
.home-divider::after {
content: "";


flex: 1;

height: 1px;

background: #4d3e2b;


}

.home-divider span {
color: #8f794c;


font-size: 13px;


}

/* ==================================================
HOME SECTIONS
================================================== */

.home-section {
max-width: 760px;


margin: 0 auto 55px;


}

.home-section h2 {
margin: 0 0 18px;


color: #b59a5d;

font-family: "Cinzel", serif;
font-size: 21px;
font-weight: 500;

letter-spacing: 1.5px;


}

.home-section p {
margin: 0 0 15px;


color: #b7a990;

font-size: 15px;
line-height: 1.85;


}

/* ==================================================
EXPLORE
================================================== */

.home-explore {
margin-top: 70px;
}

.home-links {
display: grid;


grid-template-columns: repeat(2, 1fr);

gap: 10px;

margin-top: 25px;


}

.home-link {
display: flex;
align-items: center;


min-height: 78px;

padding: 15px 18px;

border: 1px solid #493b29;
border-radius: 4px;

background: #241a14;

color: #b7a990;

font-family: Georgia, "Times New Roman", serif;

text-align: left;

cursor: pointer;

transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;


}

.home-link:hover {
border-color: #806b43;
background: #2a1e16;


transform: translateY(-2px);


}

.home-link-symbol {
display: flex;
align-items: center;
justify-content: center;


width: 38px;
margin-right: 14px;

color: #9c824e;

font-size: 18px;


}

.home-link span:last-child {
display: flex;
flex-direction: column;
gap: 5px;
}

.home-link strong {
color: #c2a96a;


font-family: "Cinzel", serif;
font-size: 13px;
font-weight: 600;

letter-spacing: 1px;


}

.home-link small {
color: #82735d;


font-size: 12px;


}

/* ==================================================
FOOTER
================================================== */

.home-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;


margin-top: 90px;

color: #655641;

font-family: "Cinzel", serif;
font-size: 10px;

letter-spacing: 2px;


}

.home-footer span {
color: #806b43;


font-size: 9px;


}

.home-footer p {
margin: 0;
}

/* ==================================================
RESPONSIVE
================================================== */

@media (max-width: 800px) {


.home {
    padding: 60px 35px 40px;
}

.home-links {
    grid-template-columns: 1fr;
}


}

@media (max-width: 600px) {


.searchbar {
    height: 68px;
    padding: 0 16px;
}

.searchbar-title {
    display: none;
}

.searchbar-search {
    width: 100%;
}

#sidebar-container {
    width: 190px;
}

.home {
    padding: 45px 22px 35px;
}

.home h1 {
    font-size: 30px;
}


}


/* ==================================================
CUSTOM SCROLLBAR
================================================== */

/* Firefox */

* {
  scrollbar-width: thin;
  scrollbar-color: #6f5b38 #1c1410;
  }

/* Chrome, Edge, Safari */

::-webkit-scrollbar {
width: 9px;
height: 9px;
}

::-webkit-scrollbar-track {
background: #1c1410;
}

::-webkit-scrollbar-thumb {
background: #6f5b38;


border: 2px solid #1c1410;
border-radius: 10px;


}

::-webkit-scrollbar-thumb:hover {
background: #92784a;
}

::-webkit-scrollbar-corner {
background: #1c1410;
}


/* ==================================================
COMPONENT ERROR
================================================== */

.component-error {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;


min-height: 60vh;

padding: 40px;

text-align: center;


}

/* Symbol */

.component-error::before {
content: "✦";


margin-bottom: 20px;

color: var(--color-gold-faint);

font-family: var(--font-display);
font-size: 22px;

opacity: 0.8;


}

/* Heading */

.component-error h2 {
margin: 0 0 12px;


color: var(--color-gold);

font-family: var(--font-display);
font-size: 22px;
font-weight: 500;

letter-spacing: 1.5px;


}

/* Description */

.component-error p {
max-width: 420px;


margin: 0;

color: var(--color-text-muted);

font-family: var(--font-body);
font-size: 14px;

line-height: 1.7;


}