/* ==========================================================================
   1. DESIGN TOKENS (Aesthetic Constants)
   ========================================================================== */
:root {
    /* Color Palette */
    --bg-html:               #fff8ef;
    --bg-body:               #fffaf3;
    --color-gold:            #7d6f36;
    --color-text-main:       #d7d3cc;
    --color-subtext:         #525252;
    --color-muted:           #5a5955;
    --color-motto:           #b5b3ad;
    --color-footer:          #6e6c67;
    --color-divider:         #8b8b8b;
    --color-link-border:     #3a3937;
    --color-link-hover:      #8c8a85;

    /* Typography Stacks */
    --font-serif:           'Times New Roman', Times, serif;
    --font-display:         'Bostrae Striped', serif;
    --font-garamond:        'Garamond', 'Times New Roman', Times, serif;

    /* Transitions */
    --transition-fast:      0.3s ease;
}

/* ==========================================================================
   2. FONTS & BASE RESET
   ========================================================================== */
@font-face {
    font-family:            'Bostrae Striped';
    src:                    url('../fonts/bostrae-striped.woff') format('woff');
    font-weight:            normal;
    font-style:             normal;
    font-display:           swap;
}

* {
    margin:                 0;
    padding:                0;
    box-sizing:             border-box;
}

html {
    background-color:       var(--bg-html);
}

body {
    background-color:       var(--bg-body);
    color:                  var(--color-text-main);
    font-family:            var(--font-serif);
    text-align:             center;
    display:                flex;
    flex-direction:         column;
    min-height:             100vh;
}

/* ==========================================================================
   3. FUNCTIONAL LAYOUT ENGINE (Pure Mechanics)
   ========================================================================== */
.container-header,
.container-footer {
    display:                flex;
    flex-direction:         column;
    justify-content:        center;
    align-items:            center;
    padding:                1.5rem;
}

.container-main {
    display:                flex;
    flex-direction:         column;
    justify-content:        center;
    flex-grow:              1;
}

.container {
    flex-grow:              2;
    max-width:              600px;
    margin:                 0 auto;
}

.container-flex {
    display:                flex;
    flex-direction:         row;
    justify-content:        center;
    align-items:            center;
    padding:                0.5rem;
}

.container-flex-column {
    display:                flex;
    flex-direction:         column;
}

/* Functional Dividers */
.divider {
    width:                  375px;
    max-width:              100%;
    height:                 1px;
    background-color:       var(--color-divider);
}

.divider-top {
    margin:                 0 auto 2.5rem auto;
}

.divider-bottom {
    width:                  auto;
}

.bullet-divider {
    margin:                 0.25rem 0.75rem;
}

/* ==========================================================================
   4. AESTHETIC TYPOGRAPHY & COMPONENTS
   ========================================================================== */
h1 {
    font-family:            var(--font-display);
    font-size:              1.875rem;
    font-weight:            500;
    letter-spacing:         0.5em;
    text-transform:         uppercase;
    color:                  var(--color-gold);
    margin:                 auto auto 0.5rem auto;
    font-variant-ligatures: none;
}

/* Subtitles inherit font-family from body */
.subtitle {
    font-size:              0.6rem;
    font-weight:            200;
    letter-spacing:         0.35em;
    text-transform:         uppercase;
    color:                  var(--color-subtext);
}

.small-subtitle {
    font-size:              0.45rem;
    font-weight:            200;
    letter-spacing:         0.25em;
    text-transform:         uppercase;
    color:                  var(--color-subtext);
    margin:                 0.5rem 0;
}

.medium-subtitle {
    font-family:            var(--font-garamond);
    font-size:              0.875rem;
    letter-spacing:         0.0625rem;
    text-transform:         capitalize;
    color:                  var(--color-subtext);
    margin:                 0.25rem 0;
    padding:                0 0.25rem;
}

.description-text {
    font-style:             italic;
}

/* Heraldry & Inscriptions */
.motto {
    font-size:              0.5rem;
    letter-spacing:         0.5em;
    font-style:             italic;
    color:                  var(--color-motto);
    margin:                 0.75rem 0;
}

.interpunct {
    font-style:             normal;
    display:                inline-block;
    font-size:              0.75em;
    vertical-align:         0.12em;
    opacity:                0.65;
}

.auc {
    font-size:              0.65rem;
    letter-spacing:         0.25em;
    color:                  var(--color-muted);
    text-transform:         uppercase;
    margin-bottom:          3.5rem;
}

.footer {
    font-size:              1.7rem;
    letter-spacing:         0.15em;
    color:                  var(--color-footer);
    text-transform:         uppercase;
}

/* Interactive Elements */
a {
    color:                  inherit;
    text-decoration:        none;
    border-bottom:          1px solid var(--color-link-border);
    padding-bottom:         2px;
    transition:             border-color var(--transition-fast);
}

a:hover {
    border-color:           var(--color-link-hover);
}

.contact-email {
    font-size:              0.5rem;
}