/* graphers.dev - Victorian Immersive Scroll */
/* Palette:
   Old Burgundy: #8A2030
   Aged Cream: #FBF5EC
   Gold Emboss: #B8963C
   Leather Brown: #5A3828
   Ink Black: #1C1410
   Faded Rose: #D4A8A0
   Parchment Tan: #E8D8C0
   Data Gray: #4A4040
*/

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

html {
    font-size: 16px;
}

body {
    font-family: 'Crimson Text', serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #1C1410;
    background-color: #FBF5EC;
    overflow-x: hidden;
}

/* Ornamental Particles */
.ornament-particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.ornament-glyph {
    position: absolute;
    color: #8A2030;
    font-family: 'Playfair Display', serif;
    user-select: none;
}

/* Victorian Frame System */
.frame-outer {
    border: 4px solid #8A2030;
    padding: 6px;
}

.frame-decorative {
    border: 2px solid #B8963C;
    padding: 6px;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,10 Q5,5 10,10 Q15,15 20,10' fill='none' stroke='%23B8963C' stroke-width='0.5' opacity='0.3'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

.frame-inner {
    border: 1px solid #5A3828;
    position: relative;
    background-color: #FBF5EC;
}

/* Corner Rosettes */
.corner-rosette {
    position: absolute;
    width: 16px;
    height: 16px;
    z-index: 5;
    transform: scale(0);
    transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.corner-rosette::before,
.corner-rosette::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #B8963C;
    opacity: 0.7;
}

.corner-rosette::before {
    top: 0;
    left: 3px;
}

.corner-rosette::after {
    top: 3px;
    left: 0;
}

.corner-tl { top: -8px; left: -8px; }
.corner-tr { top: -8px; right: -8px; }
.corner-bl { bottom: -8px; left: -8px; }
.corner-br { bottom: -8px; right: -8px; }

.corner-rosette.bloomed {
    transform: scale(1);
}

/* Title Page Hero */
.title-frame {
    max-width: 820px;
    margin: 60px auto;
    padding: 0 24px;
    opacity: 0;
    transition: opacity 600ms ease;
}

.title-frame.visible {
    opacity: 1;
}

.title-content {
    padding: 80px 40px;
    text-align: center;
}

.title-main {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    letter-spacing: 0.01em;
    color: #8A2030;
    margin-bottom: 16px;
    --kinetic-weight: 400;
}

.title-sub {
    font-family: 'Crimson Text', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #5A3828;
    margin-bottom: 12px;
}

.title-ornament {
    font-family: 'Courier Prime', monospace;
    font-size: 0.85rem;
    color: #B8963C;
    letter-spacing: 0.15em;
}

/* Narrative */
.narrative {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 24px 80px;
    position: relative;
    z-index: 1;
}

.narrative p {
    margin-bottom: 2em;
}

.narrative-lead {
    font-size: 1.2rem;
    line-height: 1.9;
    color: #5A3828;
}

.narrative-lead::first-letter {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 3.5rem;
    float: left;
    line-height: 1;
    margin-right: 8px;
    margin-top: 4px;
    color: #8A2030;
}

.narrative h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: 0.01em;
    color: #8A2030;
    margin-bottom: 1em;
    margin-top: 0.5em;
}

.narrative em {
    font-style: italic;
    color: #5A3828;
}

.narrative a {
    color: #8A2030;
    text-decoration: underline;
    text-decoration-color: #B8963C;
    transition: transform 200ms ease, text-shadow 200ms ease;
    display: inline-block;
}

.narrative a:hover {
    transform: translateY(-2px);
    text-shadow: 0 2px 4px rgba(90, 56, 40, 0.15);
}

.narrative-closing {
    font-style: italic;
    font-size: 1.1rem;
    color: #5A3828;
    text-align: center;
    margin-top: 3em;
}

/* Chart Frames */
.chart-frame {
    max-width: 320px;
    margin: 3em auto;
    padding: 20px;
    border: 2px solid #8A2030;
    background-color: #FBF5EC;
    text-align: center;
    position: relative;
}

.chart-frame::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid #B8963C;
    pointer-events: none;
}

.coxcomb-chart {
    width: 100%;
    max-width: 260px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.chart-sector {
    transition: opacity 400ms ease;
}

.chart-caption {
    display: block;
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.03em;
    color: #4A4040;
    margin-top: 12px;
}

/* Colophon Footer */
.colophon-frame {
    max-width: 500px;
    margin: 40px auto 60px;
    padding: 0 24px;
}

.colophon-content {
    padding: 48px 40px;
    text-align: center;
}

.colophon-monogram {
    font-family: 'Playfair Display', serif;
    font-weight: 900;
    font-size: 4rem;
    color: #8A2030;
    display: block;
    margin-bottom: 8px;
    line-height: 1;
}

.colophon-text {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #5A3828;
    margin-bottom: 8px;
}

.colophon-attr {
    font-family: 'Courier Prime', monospace;
    font-size: 0.8rem;
    color: #4A4040;
    letter-spacing: 0.08em;
}

/* Kinetic heading weight transition */
.kinetic-heading {
    transition: font-weight 100ms ease;
}

/* Responsive */
@media (max-width: 768px) {
    .title-content {
        padding: 40px 20px;
    }

    .narrative {
        padding: 40px 16px;
    }

    .chart-frame {
        max-width: 280px;
    }
}