/* ============================================
   jeongchi.boo — Light-Academia Political Folio
   ============================================ */

/* ---- CSS Custom Properties ---- */
:root {
    /* Palette */
    --antique-cream: #f5f0e8;
    --scholarly-charcoal: #2c2c2c;
    --faded-ink: #5c5449;
    --aged-bronze: #b8a88a;
    --northern-light: #4a8c7f;
    --dusk-amethyst: #7b6b8a;
    --dawn-blush: #c4918a;
    --carrara: #eae6de;
    --library-shadow: #1e1e24;
    --marble-vein: #d8d4cc;

    /* Aurora accent (shifts per folio via JS) */
    --aurora-accent: #4a8c7f;

    /* Typography */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Lora', Georgia, serif;
    --font-annotation: 'Caveat', cursive;

    /* Layout */
    --margin-inner: 8vw;
    --margin-outer: 12vw;
    --gutter: clamp(1.5rem, 3vw, 3rem);
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    color: var(--scholarly-charcoal);
    background-color: var(--antique-cream);
    overflow-x: hidden;
}

/* ---- SVG Filters (hidden) ---- */
.svg-filters {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---- Paper Grain Overlay ---- */
.paper-grain-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='1'/%3E%3C/svg%3E");
    background-size: 300px 300px;
}

/* ---- Opening Folio (Loading Screen) ---- */
.opening-folio {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--library-shadow);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: background-color 0.8s ease, opacity 0.5s ease;
}

.opening-folio.transitioning {
    background-color: var(--antique-cream);
}

.opening-folio.hidden {
    opacity: 0;
    pointer-events: none;
}

.opening-rosette {
    width: 200px;
    height: 200px;
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.opening-rosette.shrink {
    transform: scale(0.4);
}

.rosette-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawRosette 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: 0.4s;
}

@keyframes drawRosette {
    to {
        stroke-dashoffset: 0;
    }
}

/* ---- Folio Base ---- */
.folio {
    position: relative;
    min-height: 100vh;
    padding: clamp(3rem, 6vh, 5rem) var(--margin-outer) clamp(3rem, 6vh, 5rem) var(--margin-inner);
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    align-content: center;
}

/* ---- Folio Numbers (background) ---- */
.folio-number {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(8rem, 20vw, 16rem);
    color: var(--aged-bronze);
    opacity: 0.05;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    line-height: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
    right: var(--margin-outer);
    bottom: 2rem;
}

.folio-number.visible {
    opacity: 0.08;
    transform: translateY(-2rem);
}

/* ---- Corner Rosettes ---- */
.corner-rosette {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 2;
    animation: rotateRosette 120s linear infinite;
}

.corner-rosette-tl {
    top: clamp(1rem, 2vh, 2rem);
    left: calc(var(--margin-inner) - 16px);
}

.corner-rosette-br {
    bottom: clamp(1rem, 2vh, 2rem);
    right: calc(var(--margin-outer) - 16px);
}

@keyframes rotateRosette {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Z-Pattern Diagonal Rules ---- */
.z-rule {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.z-line {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1.2s ease;
}

.z-line.drawn {
    stroke-dashoffset: 0;
}

/* ---- Marble Dividers ---- */
.marble-divider {
    height: 6px;
    width: 100%;
    background:
        radial-gradient(ellipse at 20% 50%, var(--carrara) 0%, transparent 70%),
        radial-gradient(ellipse at 60% 50%, var(--aged-bronze) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, var(--antique-cream) 0%, transparent 70%),
        linear-gradient(90deg, var(--carrara), var(--marble-vein), var(--carrara));
    opacity: 0.7;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform-origin: center;
}

.marble-divider.revealed {
    transform: scaleX(1);
}

.marble-divider-thin {
    height: 3px;
    width: 100%;
    margin: 0.75rem 0 1rem;
    background:
        radial-gradient(ellipse at 30% 50%, var(--carrara) 0%, transparent 70%),
        radial-gradient(ellipse at 70% 50%, var(--aged-bronze) 0%, transparent 60%),
        linear-gradient(90deg, var(--carrara), var(--marble-vein), var(--carrara));
    opacity: 0.5;
}

/* ============================================
   FOLIO I: Hero
   ============================================ */
.folio-1 {
    align-content: start;
    padding-top: clamp(4rem, 10vh, 8rem);
}

.folio-1-heading {
    grid-column: 1 / 7;
    grid-row: 1;
    z-index: 5;
    align-self: start;
}

.domain-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(3.5rem, 9vw, 7.5rem);
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: var(--scholarly-charcoal);
}

.domain-name .letter {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.domain-name .letter.visible {
    opacity: 1;
}

.subtitle {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--faded-ink);
    margin-top: 0.75rem;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.subtitle.visible {
    opacity: 1;
}

.folio-1-diagram {
    grid-column: 4 / 11;
    grid-row: 1 / 3;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding-top: 2rem;
}

.governance-diagram {
    width: 100%;
    max-width: 480px;
    height: auto;
}

.diagram-label {
    font-family: var(--font-annotation);
    fill: var(--aged-bronze);
    font-weight: 400;
    opacity: 0.7;
}

.diagram-annotation {
    font-family: var(--font-annotation);
    fill: var(--faded-ink);
    font-weight: 400;
    opacity: 0.6;
}

/* Diagram node hover */
.diagram-node:hover,
.diagram-node-inner:hover {
    fill-opacity: 0.3;
    cursor: pointer;
}

.diagram-node:hover ~ .diagram-label,
.diagram-node:hover ~ .diagram-arc {
    opacity: 1;
}

.diagram-node {
    transition: fill-opacity 0.3s ease, stroke 0.3s ease;
}

.diagram-node:hover {
    stroke: var(--aurora-accent);
    stroke-opacity: 1;
}

.diagram-node-inner {
    transition: fill-opacity 0.3s ease, stroke 0.3s ease;
}

.diagram-node-inner:hover {
    stroke: var(--aurora-accent);
    stroke-opacity: 1;
}

.diagram-arc {
    transition: stroke 0.3s ease, stroke-opacity 0.3s ease;
}

.diagram-center {
    transition: fill-opacity 0.3s ease;
}

/* Margin Notes */
.margin-note {
    font-family: var(--font-annotation);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--aged-bronze);
    position: absolute;
    max-width: 140px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s cubic-bezier(0.33, 0, 0.67, 1), transform 0.6s cubic-bezier(0.33, 0, 0.67, 1);
}

.margin-note.visible {
    opacity: 1;
    transform: translateY(0);
}

.margin-note-right {
    right: -160px;
    top: 50%;
    transform: translateY(12px);
}

.margin-note-right.visible {
    transform: translateY(-50%);
}

.margin-note-left {
    left: -150px;
    top: 40%;
}

.margin-note-left.visible {
    transform: translateY(0);
}

.folio-1-tagline {
    grid-column: 7 / 13;
    grid-row: 3;
    z-index: 5;
    align-self: end;
    text-align: right;
    padding-top: 2rem;
}

.tagline-text {
    font-family: var(--font-body);
    font-style: italic;
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    color: var(--faded-ink);
    line-height: 1.8;
}

/* ============================================
   FOLIO II: Thesis
   ============================================ */
.folio-2 {
    align-content: center;
}

.folio-2-quote {
    grid-column: 6 / 13;
    grid-row: 1;
    z-index: 5;
    align-self: start;
}

.pull-quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    line-height: 1.5;
    color: var(--scholarly-charcoal);
    position: relative;
    padding-left: 2rem;
    /* Column fluting accent */
    border-left: 12px solid transparent;
    border-image: repeating-linear-gradient(
        180deg,
        var(--carrara) 0px,
        var(--carrara) 3px,
        var(--marble-vein) 3px,
        var(--marble-vein) 6px
    ) 12;
}

.quote-mark {
    font-family: var(--font-display);
    font-size: 2em;
    color: var(--dawn-blush);
    line-height: 0;
    vertical-align: -0.2em;
}

.folio-2-illustration {
    grid-column: 1 / 6;
    grid-row: 1 / 3;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.column-capital {
    width: 100%;
    max-width: 280px;
    height: auto;
}

.folio-2-text {
    grid-column: 1 / 8;
    grid-row: 3;
    z-index: 5;
    align-self: end;
}

.body-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.72;
    letter-spacing: 0.005em;
    color: var(--scholarly-charcoal);
    max-width: 38em;
    margin-bottom: 1.2rem;
}

.body-text:last-child {
    margin-bottom: 0;
}

/* ============================================
   FOLIO III: Evidence
   ============================================ */
.folio-3 {
    align-content: center;
    padding-top: clamp(4rem, 8vh, 6rem);
    padding-bottom: clamp(4rem, 8vh, 6rem);
}

.evidence-columns {
    grid-column: 1 / 13;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    z-index: 5;
}

.evidence-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Staggered offsets for z-pattern diagonal read */
.evidence-col-1 {
    padding-top: 0;
}

.evidence-col-2 {
    padding-top: 4rem;
}

.evidence-col-3 {
    padding-top: 8rem;
}

.evidence-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

.evidence-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--scholarly-charcoal);
}

.evidence-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.72;
    color: var(--scholarly-charcoal);
    max-width: 38em;
}

.folio-annotation {
    font-family: var(--font-annotation);
    font-size: clamp(0.85rem, 1.1vw, 1rem);
    color: var(--aged-bronze);
    margin-top: 1rem;
    display: block;
}

/* ============================================
   FOLIO IV: Closing
   ============================================ */
.folio-4 {
    align-content: center;
}

.folio-4-statement {
    grid-column: 5 / 13;
    grid-row: 1;
    z-index: 5;
    align-self: start;
    text-align: right;
}

.closing-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 3.2rem);
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--scholarly-charcoal);
    margin-bottom: 1.5rem;
}

.closing-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: clamp(1rem, 1.25vw, 1.15rem);
    line-height: 1.72;
    color: var(--faded-ink);
    max-width: 38em;
    margin-left: auto;
}

.folio-4-illustration {
    grid-column: 2 / 12;
    grid-row: 2;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.world-map {
    width: 100%;
    max-width: 560px;
    height: auto;
}

.folio-4-mark {
    grid-column: 1 / 6;
    grid-row: 3;
    z-index: 5;
    align-self: end;
}

.closing-domain {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    letter-spacing: 0.02em;
    color: var(--scholarly-charcoal);
    display: block;
}

.closing-korean {
    font-family: var(--font-annotation);
    font-size: clamp(1.2rem, 2vw, 1.6rem);
    color: var(--aged-bronze);
    display: block;
    margin-top: 0.25rem;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
    position: relative;
    padding: 2rem var(--margin-inner);
    text-align: center;
    background-color: var(--antique-cream);
}

.egg-dart-border {
    width: 100%;
    height: 16px;
    display: block;
    margin-bottom: 1.5rem;
}

.footer-text {
    font-family: var(--font-annotation);
    font-size: clamp(0.9rem, 1.1vw, 1rem);
    color: var(--aged-bronze);
    letter-spacing: 0.05em;
}

/* ============================================
   Aurora accent per folio
   ============================================ */
.folio-1 .pull-quote,
.folio-1 a,
.folio-1 .evidence-heading {
    color: var(--northern-light);
}

.folio-2 .evidence-heading {
    color: var(--dusk-amethyst);
}

/* Links and interactive accents use aurora */
a {
    color: var(--aurora-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--dusk-amethyst);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
    :root {
        --margin-inner: 5vw;
        --margin-outer: 5vw;
    }

    .folio {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        min-height: auto;
        padding-top: clamp(2rem, 4vh, 3rem);
        padding-bottom: clamp(2rem, 4vh, 3rem);
    }

    .folio-1-heading,
    .folio-1-diagram,
    .folio-1-tagline,
    .folio-2-quote,
    .folio-2-illustration,
    .folio-2-text,
    .folio-4-statement,
    .folio-4-illustration,
    .folio-4-mark {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .folio-1-tagline {
        text-align: left;
    }

    .folio-4-statement {
        text-align: left;
    }

    .closing-text {
        margin-left: 0;
    }

    .evidence-columns {
        grid-template-columns: 1fr;
    }

    .evidence-col-2,
    .evidence-col-3 {
        padding-top: 0;
    }

    .margin-note {
        position: static;
        display: block;
        margin-top: 1rem;
        max-width: 100%;
        transform: none;
        opacity: 0.8;
    }

    .margin-note.visible {
        transform: none;
    }

    .z-rule {
        display: none;
    }

    .folio-number {
        font-size: clamp(5rem, 15vw, 10rem);
    }

    .governance-diagram {
        max-width: 340px;
    }
}

@media (max-width: 600px) {
    .domain-name {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

    .pull-quote {
        font-size: clamp(1.1rem, 4vw, 1.4rem);
    }

    .closing-heading {
        font-size: clamp(1.4rem, 5vw, 2rem);
    }

    .folio-2-illustration {
        order: -1;
    }

    .column-capital {
        max-width: 200px;
    }
}