/* ============================================================
   CODEX HARMONICUS — codex.css
   Include this AFTER swordistry.css on all codex pages.
   Overrides: body bg, page container, accent colors.
   Adds: parchment shell, codex nav, entry styles, footnotes.
============================================================ */

/* ---- CODEX PALETTE VARIABLES ---- */
:root {
    --c-crimson:    #551110;   /* masthead titles, drop caps */
    --c-gold:       #c9a84c;   /* borders, accent rules, numerals */
    --c-tan:        #8b6b3d;   /* labels, nav, secondary text */
    --c-ink-dark:   #2a1f0e;   /* term headings */
    --c-ink:        #3d2b1a;   /* hub titles, nav hover */
    --c-ink-warm:   #3a2c18;   /* body copy */
    --c-ink-mid:    #5c3d1a;   /* italic intro, dekker notes */
    --c-link:       #6b4c2a;   /* inline links */
    --c-border:     #ddd0b8;   /* nav, section borders */
    --c-border-lt:  #e4d9c4;   /* entry dividers */
    --c-bg-raised:  #ede5cf;   /* dekker note background */
    --c-bg:         #f7f3ec;   /* page background — light warm white */
}


/* ---- BODY: light parchment + fractal noise grain ---- */
body {
    background-color: var(--c-bg);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: url('/img/noise-grain.webp'), url('/img/noise-grain.png');
    background-repeat: repeat;
    background-size: 512px 512px;
    mix-blend-mode: multiply;
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
}


/* ---- PARCHMENT PAGE SHELL ---- */
.codex-page {
    max-width: 680px;
    margin: 0 auto;
    padding: 3.5rem 3rem 5rem;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}


/* ---- BACK LINK ---- */
.codex-back-link {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-tan);
    text-decoration: none;
    margin-bottom: 1.75rem;
    transition: color 0.2s;
}
.codex-back-link:hover { color: var(--c-ink); }


/* ---- MASTHEAD ---- */
.codex-masthead {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--c-gold);
}

.codex-masthead-logo {
    display: block;
    margin: 0 auto 1.5rem;
    height: 244px;
    width: auto;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.codex-masthead-logo:hover { opacity: 1; }

.codex-masthead h1 {
    font-family: 'Cinzel', serif;
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: var(--c-crimson);
    margin-bottom: 0.3rem;
}

.codex-masthead-sub {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 0.95rem;
    color: var(--c-tan);
}


/* ---- IN-CODEX NAV ---- */
.codex-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--c-border);
    padding-bottom: 0;
}

.codex-nav a {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--c-tan);
    text-decoration: none;
    padding: 0.6rem 1.1rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
    display: inline-block;
    margin-bottom: -1px;
}

.codex-nav a:hover,
.codex-nav a.active {
    color: var(--c-ink);
    border-bottom-color: var(--c-gold);
}


/* ---- FRONTISPIECE (hub index only) ---- */
.codex-frontispiece {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--c-border);
}
.codex-frontispiece img {
    width: 210px;
    max-width: 100%;
    opacity: 0.88;
}


/* ---- PAGE INTRO (used on hub and glossary) ---- */
.codex-intro {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    color: var(--c-ink-mid);
    font-size: 1.15rem;
    line-height: 1.85;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--c-border);
}

.codex-intro p + p { margin-top: 0.6rem; }


/* ---- PRE-RELEASE GATE ---- */
.codex-gate-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--c-tan);
}

.codex-gate-date {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: var(--c-crimson);
    margin-top: 0.5rem;
}

.codex-gate-back {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--c-tan);
    text-decoration: none;
    border-bottom: 1px solid var(--c-gold);
    padding-bottom: 2px;
    transition: color 0.2s;
}

.codex-gate-back:hover { color: var(--c-ink); }


/* ---- SECTION LABEL ---- */
.codex-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--c-tan);
    margin: 3rem 0 1.25rem;
    position: relative;
}

.codex-section-label::before {
    content: '✦';
    display: block;
    text-align: center;
    font-size: 0.5rem;
    color: var(--c-gold);
    opacity: 0.5;
    margin-bottom: 0.9rem;
    letter-spacing: 8px;
}


/* ---- ENTRIES ---- */
.codex-entry {
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--c-border-lt);
    scroll-margin-top: 2rem;
}

.codex-entry:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.entry-term {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-ink-dark);
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}

.entry-qualifier {
    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-size: 0.88rem;
    letter-spacing: 0;
    color: var(--c-tan);
}

.entry-pronunciation {
    font-family: 'Crimson Text', serif;
    font-size: 0.88rem;
    color: var(--c-tan);
    margin-bottom: 0.4rem;
}

.entry-body {
    font-family: 'Alegreya', serif;
    font-size: 1.35rem;
    color: var(--c-ink-warm);
    line-height: 1.9;
}

.entry-body a {
    color: var(--c-link);
    text-decoration: none;
    border-bottom: 1px solid var(--c-gold);
    transition: color 0.2s, border-color 0.2s;
}

.entry-body a:hover {
    color: var(--c-ink);
    border-bottom-color: var(--c-tan);
}


/* ---- DEKKER FOOTNOTES — boxed text ---- */
.dekker-note {
    margin-top: 1.1rem;
    margin-bottom: 0.25rem;
    padding: 0.85rem 1rem 0.85rem 1.1rem;
    background: var(--c-bg-raised);
    border: 1px solid var(--c-gold);
    border-left: 3px solid var(--c-gold);
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--c-ink-mid);
    line-height: 1.7;
}

.dekker-note::before {
    content: 'Dekker — ';
    font-family: 'Cinzel', serif;
    font-style: normal;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--c-tan);
    display: block;
    margin-bottom: 0.35rem;
}


/* ---- ARTICLE BODY (for article.php) ---- */
.codex-article-body {
    font-family: 'Alegreya', serif;
    font-size: 1.35rem;
    color: var(--c-ink-warm);
    line-height: 1.9;
}

.codex-article-body h2 {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-ink);
    margin: 2.5rem 0 1rem;
}

.codex-article-body p { margin-bottom: 1.1rem; }
.codex-article-body p:last-child { margin-bottom: 0; }
.codex-article-body em { font-style: italic; }
.codex-article-body strong { font-weight: 700; color: var(--c-ink-dark); }

.codex-article-body a {
    color: var(--c-link);
    text-decoration: none;
    border-bottom: 1px solid var(--c-gold);
    padding-bottom: 1px;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.codex-article-body a:hover {
    color: var(--c-crimson);
    border-bottom-color: var(--c-crimson);
}

.codex-article-body h3 {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    color: var(--c-ink);
    margin: 2rem 0 0.8rem;
}

.codex-article-body h4 {
    font-family: 'Cinzel', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--c-ink-dark);
    margin: 2rem 0 0.5rem;
    letter-spacing: 0.5px;
}

.codex-article-body blockquote {
    margin: 1.5rem 0;
    padding-left: 1rem;
    border-left: 2px solid var(--c-gold);
    font-style: italic;
    color: var(--c-ink-mid);
}

.codex-article-body img {
    max-width: 60%;
    height: auto;
    display: block;
    margin: 1rem auto;
}


/* ---- DROP CAPS — article page openers only ---- */
.codex-article-body > p:first-child::first-letter {
    font-family: 'Cinzel', serif;
    font-size: 3.6rem;
    font-weight: 700;
    line-height: 0.78;
    float: left;
    margin-right: 0.08em;
    margin-top: 0.06em;
    color: var(--c-crimson);
    text-shadow: 1px 1px 0 rgba(85,17,16,0.18);
}


/* ---- DECORATIVE DIVIDERS ---- */
.codex-rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 2.5rem 0;
    color: var(--c-gold);
}

.codex-rule::before,
.codex-rule::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-gold);
    opacity: 0.6;
}

.codex-rule-glyph {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    letter-spacing: 4px;
    color: var(--c-gold);
    opacity: 0.8;
    white-space: nowrap;
}


/* ---- HUB PAGE — CHAPTER LIST ---- */
.codex-hub-list {
    margin-top: 2rem;
    border-top: 1px solid var(--c-gold);
}

.codex-hub-entry {
    display: block;
    padding: 1.4rem 0.25rem;
    border-bottom: 1px solid var(--c-border);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: background 0.18s;
}

.codex-hub-entry:hover {
    background: rgba(201, 168, 76, 0.07);
}

.codex-hub-entry-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.codex-hub-numeral {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--c-gold);
    opacity: 0.6;
    min-width: 2.25rem;
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
    transition: opacity 0.18s;
}

.codex-hub-entry:hover .codex-hub-numeral { opacity: 1; }

.codex-hub-entry-text { flex: 1; }

.codex-hub-entry-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-ink);
    margin-bottom: 0.25rem;
    transition: color 0.18s;
}

.codex-hub-entry:hover .codex-hub-entry-title { color: var(--c-crimson); }

.codex-hub-entry-desc {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 1.05rem;
    color: var(--c-tan);
    line-height: 1.5;
}

.codex-hub-symbol {
    width: 32px;
    height: 32px;
    color: var(--c-tan);
    opacity: 0.35;
    flex-shrink: 0;
    transition: opacity 0.18s, color 0.18s;
}

.codex-hub-entry:hover .codex-hub-symbol {
    opacity: 0.75;
    color: var(--c-gold);
}


/* ---- COLOPHON ---- */
.codex-colophon {
    margin-top: 3.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-gold);
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--c-tan);
    text-align: center;
    line-height: 1.7;
}

.codex-colophon p + p { margin-top: 0.4rem; }


/* ---- BACK LINK ---- */
.codex-back-link {
    display: block;
    text-align: center;
    margin-top: 2.5rem;
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--c-tan);
    text-decoration: none;
    transition: color 0.2s;
}

.codex-back-link:hover { color: var(--c-ink); }


/* ---- GLOSSARY JUMP NAV & SEARCH ---- */

.glossary-jumpnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 1.75rem;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 0.4rem 0;
}

.glossary-jumpnav a {
    font-family: 'Cinzel', serif;
    font-size: 0.58rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-tan);
    text-decoration: none;
    padding: 0.3rem 0.7rem;
    border: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.glossary-jumpnav a:hover {
    color: var(--c-ink);
    border-bottom-color: var(--c-gold);
}

/* Collapsible section block */
.glossary-section-block {
    margin-bottom: 0.25rem;
}

.glossary-section-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    padding-right: 0.25rem;
}

.glossary-section-summary::-webkit-details-marker { display: none; }

.glossary-section-summary::after {
    content: '▸';
    font-family: sans-serif;
    font-size: 0.6rem;
    color: var(--c-tan);
    opacity: 0.6;
    margin-left: 0.5rem;
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.glossary-section-block[open] > .glossary-section-summary::after {
    transform: rotate(90deg);
}

.glossary-section-count {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    color: var(--c-tan);
    opacity: 0.5;
    margin-left: auto;
    padding-right: 0.75rem;
    letter-spacing: 1px;
}

/* Search input */
.codex-search-wrap {
    margin-bottom: 2rem;
}

.codex-search {
    width: 100%;
    box-sizing: border-box;
    font-family: 'Crimson Text', serif;
    font-size: 1.05rem;
    color: var(--c-ink-warm);
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid var(--c-border);
    border-bottom: 2px solid var(--c-gold);
    padding: 0.5rem 0.75rem;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 0;
}

.codex-search::placeholder {
    color: var(--c-tan);
    font-style: italic;
    opacity: 0.8;
}

.codex-search:focus {
    background: rgba(255, 255, 255, 0.7);
    border-bottom-color: var(--c-crimson);
}

/* Clear button that browsers add to search inputs */
.codex-search::-webkit-search-cancel-button {
    opacity: 0.4;
    cursor: pointer;
}

.codex-search-noresults {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--c-tan);
    margin-top: 0.75rem;
}


/* ---- HARMONIC SIGNATURES — rendered via [%HOROSCOPES%] in article.php ---- */

/* Jump-nav: row of 12 zodiac symbols */
.harmonic-jumpnav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    margin: 2rem 0 2.5rem;
    border-top: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
    padding: 0.55rem 0;
}

.harmonic-jumpnav a {
    color: var(--c-tan);
    text-decoration: none;
    padding: 0.2rem 0.55rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s, transform 0.15s;
    border: none;
}

.sign-nav-icon {
    width: 1.35rem;
    height: 1.35rem;
    display: block;
    fill: currentColor;
}

.harmonic-jumpnav a:hover {
    color: var(--c-ink);
    transform: scale(1.2);
}

/* Individual sign block — <details> element, collapsed by default */
.harmonic-sign-block {
    margin: 1.75rem 0;
    padding: 1.1rem 1.25rem 1.1rem 1.4rem;
    border-left: 4px solid var(--c-gold); /* overridden inline per sign */
    background: rgba(255, 255, 255, 0.3);
    scroll-margin-top: 2.5rem;
}

/* <summary> = the header row — clickable toggle */
.harmonic-sign-block > summary.harmonic-sign-header {
    list-style: none;       /* Firefox */
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0;       /* no gap until open */
}

/* Remove Chrome/Safari default triangle */
.harmonic-sign-block > summary.harmonic-sign-header::-webkit-details-marker {
    display: none;
}

/* Chevron — rotates 90° when open */
.harmonic-sign-block > summary.harmonic-sign-header::after {
    content: '▸';
    font-family: sans-serif;
    font-size: 0.6rem;
    color: var(--c-tan);
    opacity: 0.6;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    padding-left: 0.5rem;
    transition: transform 0.18s ease;
}

.harmonic-sign-block[open] > summary.harmonic-sign-header::after {
    transform: rotate(90deg);
}

/* Add separator + spacing when expanded */
.harmonic-sign-block[open] > summary.harmonic-sign-header {
    margin-bottom: 0.9rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--c-border-lt);
}

/* Header row: symbol · name+quality · dates */
.harmonic-sign-header {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 0.9rem;
}

.harmonic-sign-symbol {
    color: var(--c-gold); /* overridden inline per sign */
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.sign-icon {
    width: 2rem;
    height: 2rem;
    display: block;
    fill: currentColor;
}

.harmonic-sign-title {
    flex: 1;
    min-width: 0;
}

.harmonic-sign-name {
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--c-ink-dark);
    display: block;
}

.harmonic-sign-quality {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 0.93rem;
    color: var(--c-tan);
    display: block;
    margin-top: 0.1rem;
}

.harmonic-sign-dates {
    font-family: 'Crimson Text', serif;
    font-size: 0.85rem;
    color: var(--c-tan);
    flex-shrink: 0;
    text-align: right;
    padding-top: 0.25rem;
    white-space: nowrap;
}

/* Shared label/value pattern used in data and stones rows */
.harmonic-data-label {
    font-family: 'Cinzel', serif;
    font-size: 0.53rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-tan);
    display: block;
    margin-bottom: 0.12rem;
}

/* Inline icons for element / modality / planet data fields */
.data-icon {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    fill: currentColor;
    margin-right: 0.3em;
    flex-shrink: 0;
}

.harmonic-data-val {
    font-family: 'Crimson Text', serif;
    font-size: 1rem;
    color: var(--c-ink-warm);
    display: block;
}

/* Key / Element / Modality / Ruler row */
.harmonic-data-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--c-border-lt);
}

.harmonic-data-item {
    min-width: 72px;
}

/* Ruler ancient qualifier */
.harmonic-ruler-ancient {
    font-size: 0.88rem;
    color: var(--c-tan);
    font-style: italic;
}

/* Primary / Ancient / Shadow stones row */
.harmonic-stones-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    padding-bottom: 0.7rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--c-border-lt);
}

/* Guardian Cardinal row — sigil + badge side by side */
.harmonic-guardian-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

/* Inline SVG sigil — sized via CSS, tinted via currentColor */
.harmonic-guardian-sigil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    opacity: 0.8;
}

.harmonic-guardian-sigil svg {
    width: 36px;
    height: 36px;
    display: block;
    fill: currentColor;
}

.harmonic-guardian-badge {
    display: inline-block;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--c-ink);
    border: 1px solid var(--c-border);
    padding: 0.18rem 0.6rem;
}

/* Description paragraph */
.harmonic-sign-desc {
    font-family: 'Alegreya', serif;
    font-size: 1.15rem;
    color: var(--c-ink-warm);
    line-height: 1.85;
    text-transform: none;
    letter-spacing: normal;
    font-weight: normal;
    font-style: normal;
}

.harmonic-sign-desc p {
    font-family: 'Alegreya', serif;
    font-size: 1.15rem;
    color: var(--c-ink-warm);
    line-height: 1.85;
    margin-bottom: 0.6rem;
}

/* Block the article-body drop-cap from bleeding into description paragraphs */
.codex-article-body .harmonic-sign-desc p:first-child::first-letter {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    float: none;
    margin: 0;
    color: inherit;
    text-shadow: none;
}

/* Signature color — italic flavor text below description */
.harmonic-sign-color {
    font-family: 'Alegreya', serif;
    font-style: italic;
    font-size: 1rem;
    color: var(--c-ink-mid);
    margin-top: 0.5rem;
    margin-bottom: 0;
    line-height: 1.6;
    text-transform: none;
}


/* ---- RESPONSIVE ---- */
@media (max-width: 720px) {
    .codex-page {
        padding: 2.5rem 1.5rem 4rem;
    }

    .codex-masthead h1 {
        font-size: 1.4rem;
        letter-spacing: 3px;
    }

    .codex-nav a {
        padding: 0.5rem 0.75rem;
        font-size: 0.63rem;
    }

    /* Harmonic blocks — stack dates below name on narrow screens */
    .harmonic-sign-header {
        flex-wrap: wrap;
    }

    .harmonic-sign-dates {
        order: 3;
        flex: 0 0 100%;
        text-align: left;
        padding-top: 0;
    }
}