/* ============================================================
   Protocol Zero — Font Override: Cinzel + Raleway
   To activate: add this file AFTER style.css in head-common.html
   To revert:   remove or comment out the link tag
   ============================================================ */

/* Replaces Montserrat (body) */
body,
body *:not([class*="la-"]):not([class*="line-"]) {
    /* font-family: 'Raleway', sans-serif; */
}

/* Replaces Roboto (headings) */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.05em;
}

/* Replaces Montserrat on heading spans (subtitles) */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    letter-spacing: 0.08em;
}

/* Replaces Roboto Condensed (page title) */
.ashade-mobile-title-wrap h1,
.ashade-page-title-wrap h1 {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

.ashade-mobile-title-wrap h1 span,
.ashade-page-title-wrap h1 span {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    letter-spacing: 0.1em;
}

/* Nav and UI elements */
.ashade-nav,
.ashade-nav a,
.ashade-header {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.08em;
}

/* Body text size — Raleway reads well at 17px on dark */
body {
    font-size: 17px;
}

/* Long-form gate content */
.long-form-content p {
    font-size: 18px;
    line-height: 1.85;
    font-weight: 400;
    font-family: "Libre Baskerville", serif;
}

/* Intro paragraph */
p.ashade-intro {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    line-height: 1.75;
    font-weight: 400;
}

/* Poem styling */
.pz-poem {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    font-size: 18px;
    font-weight: 400;
}

.pz-poem h3 {
    font-family: 'Cinzel', serif;
    font-style: normal;
}

/* Buttons and tags */
.ashade-button,
.ashade-learn-more,
.loop-gate-tag {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.1em;
}

/* ============================================================
   Loop page shared styles
   Used by all individual loop pages and the loops index
   ============================================================ */

/* Meta block — illusion / direction / goal / gate */
.loop-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 1.5rem 0 2rem;
    border-top: 1px solid #2a2a2a;
    border-bottom: 1px solid #2a2a2a;
}

.loop-meta-field {
    display: flex;
    flex-direction: column;
    padding: 14px 24px 14px 0;
    margin-right: 24px;
}

.loop-meta-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5C5C60;
    margin-bottom: 4px;
    font-family: 'Cinzel', serif;
}

.loop-meta-value {
    font-size: 14px;
    color: #a0a0a4;
    font-family: 'Raleway', sans-serif;
}

/* Section divider */
.loop-divider {
    border: none;
    border-top: 1px solid #2a2a2a;
    margin: 2.5rem 0;
}

/* Inline gate / resource link strip */
.map-links {
    margin-top: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.map-links a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5C5C60;
    border: 1px solid #2a2a2a;
    padding: 6px 14px;
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s;
    font-family: 'Cinzel', serif;
}

.map-links a:hover {
    color: #a5c0c5;
    border-color: #5C5C60;
}

/* All-nine loop navigation strip */
.loop-nav {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #2a2a2a;
}

.loop-nav-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5C5C60;
    margin-bottom: 1rem;
    display: block;
    font-family: 'Cinzel', serif;
}

.loop-nav-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.loop-nav-grid a {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5C5C60;
    border: 1px solid #2a2a2a;
    padding: 5px 12px;
    text-decoration: none;
    transition: color 0.3s, border-color 0.3s;
    font-family: 'Cinzel', serif;
}

.loop-nav-grid a:hover {
    color: #a5c0c5;
    border-color: #5C5C60;
}

.loop-nav-grid a.current {
    color: #a5c0c5;
    border-color: #5C5C60;
}

/* ============================================================
   Loops index page specific
   ============================================================ */

/* Individual loop entry row */
.loop-entry {
    padding: 1.75rem 0;
    border-bottom: 1px solid #2a2a2a;
}

.loop-entry:first-child {
    border-top: 1px solid #2a2a2a;
}

.loop-entry h2 {
    margin-bottom: 0.6rem;
}

.loop-entry p {
    margin-bottom: 0.85rem;
    color: #a0a0a4;
}

/* Separator note before nihilistic loop */
.loop-structural-note {
    font-size: 13px;
    color: #5C5C60;
    font-style: italic;
    margin: 2.5rem 0 1rem;
    font-family: 'Raleway', sans-serif;
    line-height: 1.7;
}

/* Compass and quadrant grid */
.loop-compass-wrap {
    background: #0f0f0f;
    padding: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.loop-quadrant-wrap {
    margin-top: 2rem;
    border-top: 1px solid #2a2a2a;
    padding-top: 2rem;
}

.loop-axis-wrap {
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    grid-template-rows: auto 1fr auto;
}

.loop-axis-top {
    grid-column: 1 / 4;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
}

.loop-axis-bottom {
    grid-column: 1 / 4;
    grid-row: 3;
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
}

.loop-axis-top hr,
.loop-axis-bottom hr {
    flex: 1;
    margin: 0;
    border: none;
    border-top: 1px solid #2a2a2a;
}

.loop-axis-left {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loop-axis-right {
    grid-column: 3;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loop-axis-left span { transform: rotate(-90deg); }
.loop-axis-right span { transform: rotate(90deg); }

.loop-axis-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #5C5C60;
    white-space: nowrap;
    font-family: 'Cinzel', serif;
}

.loop-axis-grid-wrap {
    grid-column: 2;
    grid-row: 2;
}

.loop-quadrant-footnote {
    margin-top: 1rem;
    text-align: center;
    font-size: 12px;
    color: #5C5C60;
    font-style: italic;
    font-family: 'Raleway', sans-serif;
}

/* Loop index grid hover states */
.ashade-grid-item { transition: background 0.3s; }
.ashade-grid-item:hover { background: #17171B; }
.ashade-grid-item:hover .ashade-button { border-color: #5C5C60; color: #a5c0c5; }
.ashade-grid-item:hover h6 { color: #a5c0c5; }

.loop-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5C5C60;
    border: 2px solid #313133;
    padding: 2px 8px;
    margin: 0 4px 4px 0;
    transition: color 0.3s, border-color 0.3s;
    font-family: 'Cinzel', serif;
}

.ashade-grid-item:hover .loop-tag { color: #a5c0c5; border-color: #5C5C60; }

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 640px) {
    .ashade-no-gap.ashade-grid-2cols .ashade-grid-item { width: 100%; }

    .loop-meta {
        flex-direction: column;
    }

    .loop-meta-field {
        padding: 10px 0;
        margin-right: 0;
        border-bottom: 1px solid #1e1e1e;
    }

    .loop-meta-field:last-child {
        border-bottom: none;
    }

    .loop-nav-grid a {
        font-size: 10px;
        padding: 4px 10px;
    }
}