/* ============================================= */
/* loyer.dev — Styles                            */
/* A 19th-century Parisian notary's office        */
/* ============================================= */

/* --- Custom Properties --- */
:root {
    /* Palette */
    --archive-black: #0C0B0F;
    --parchment-cream: #F2EBD9;
    --ledger-ivory: #E8E0CC;
    --vellum-white: #DDD5C4;
    --dusty-graphite: #8A8275;
    --seal-carmine: #A3333D;
    --verdigris: #5B8A72;
    --notary-gold: #C6A94D;

    /* Typography */
    --font-serif: 'Libre Baskerville', 'Georgia', serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

    /* Spacing */
    --base-unit: 1.25rem;
    --golden: 1.618;
    --content-width: 42em;
}

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

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-serif);
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: var(--golden);
    color: var(--vellum-white);
    background-color: var(--archive-black);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Grain Overlay --- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}

/* --- Clause (Section) Base --- */
.clause {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--base-unit) * 4) calc(var(--base-unit) * 2);
}

.clause__inner {
    max-width: var(--content-width);
    width: 100%;
    margin: 0 auto;
}

.clause__number {
    display: block;
    font-family: var(--font-mono);
    font-size: clamp(0.75rem, 0.9vw, 0.85rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--dusty-graphite);
    margin-bottom: calc(var(--base-unit) * 1.5);
    text-align: center;
}

.clause__heading {
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--vellum-white);
    text-align: center;
    margin-bottom: calc(var(--base-unit) * 2.5);
}

/* ============================================= */
/* CLAUSE I — Preamble                           */
/* ============================================= */
.clause--preamble {
    min-height: 100vh;
    justify-content: center;
    text-align: center;
}

.clause--preamble .clause__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.preamble__title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4.5vw, 4rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: var(--vellum-white);
    margin-bottom: calc(var(--base-unit) * 0.5);
    opacity: 0;
    transform: translateY(12px);
    animation: preambleFadeIn 0.6s ease-out 0.3s forwards;
}

@keyframes preambleFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preamble__letter {
    display: inline-block;
}

.preamble__letter--seal {
    position: relative;
    color: transparent;
}

.preamble__dot {
    display: inline-block;
    color: var(--dusty-graphite);
}

.preamble__letter--tld {
    color: var(--dusty-graphite);
}

/* Seal positioned over the "o" */
.seal-motif--preamble {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.preamble__letter--seal {
    display: inline-block;
    position: relative;
    width: 0.65em;
    text-align: center;
}

.seal-motif--preamble {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52%);
    width: 0.8em;
    height: 0.8em;
}

.preamble__epigraph {
    font-family: var(--font-serif);
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    font-style: italic;
    color: var(--dusty-graphite);
    max-width: 32em;
    margin-top: calc(var(--base-unit) * 2);
    line-height: var(--golden);
    opacity: 0;
    transform: translateY(8px);
    animation: preambleFadeIn 0.5s ease-out 0.8s forwards;
}

.preamble__citation {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 0.8vw, 0.78rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--dusty-graphite);
    margin-top: calc(var(--base-unit) * 0.75);
    opacity: 0;
    animation: preambleFadeIn 0.5s ease-out 1s forwards;
}

/* ============================================= */
/* Ruling Pen Lines                              */
/* ============================================= */
.ruling-line {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 2);
}

.ruling-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 1.2s ease-out;
}

.ruling-line.visible .ruling-path {
    stroke-dashoffset: 0;
}

/* ============================================= */
/* CLAUSE II — Article Premier                   */
/* ============================================= */
.clause--article {
    min-height: 100vh;
}

.article__scroll-text {
    position: relative;
}

.article__scroll-text p {
    margin-bottom: calc(var(--base-unit) * var(--golden));
    text-indent: 2em;
}

/* Drop Capital on first paragraph */
.article__scroll-text p:first-child {
    text-indent: 0;
}

.article__scroll-text p:first-child::first-letter {
    float: left;
    font-family: var(--font-serif);
    font-size: 4em;
    font-style: italic;
    line-height: 0.8;
    padding-right: 0.1em;
    color: var(--seal-carmine);
    text-shadow: 1px 1px 0 var(--archive-black);
}

/* Unroll animation */
.article__scroll-text {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.article__scroll-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================= */
/* Seal Terminator                               */
/* ============================================= */
.seal-terminator {
    display: flex;
    justify-content: center;
    margin-top: calc(var(--base-unit) * 3);
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

.seal-terminator.visible {
    opacity: 1;
}

.seal-motif--small circle,
.seal-motif--small text {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 1s ease-out;
}

.seal-terminator.visible .seal-motif--small circle,
.seal-terminator.visible .seal-motif--small text {
    stroke-dashoffset: 0;
}

/* ============================================= */
/* CLAUSE III — Registre                         */
/* ============================================= */
.clause--registre {
    min-height: 80vh;
}

.registre__ledger {
    width: 100%;
    margin-top: calc(var(--base-unit) * 1.5);
}

.registre__grid {
    display: block;
    width: 100%;
    margin: calc(var(--base-unit) * 0.5) 0;
}

.registre__row {
    display: grid;
    grid-template-columns: 3em 1fr 1.6fr 6em;
    gap: 0;
    padding: calc(var(--base-unit) * 0.6) 0;
    border-bottom: 1px solid rgba(138, 130, 117, 0.2);
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.registre__row:nth-child(odd) {
    background-color: rgba(242, 235, 217, 0.03);
}

.registre__row:nth-child(even) {
    background-color: rgba(232, 224, 204, 0.02);
}

.registre__row.visible {
    opacity: 1;
    transform: translateX(0);
}

.registre__cell {
    padding: calc(var(--base-unit) * 0.3) calc(var(--base-unit) * 0.5);
    font-size: clamp(0.8rem, 0.95vw, 0.9rem);
}

.registre__cell--num {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: clamp(0.75rem, 0.85vw, 0.82rem);
    letter-spacing: 0.06em;
    color: var(--dusty-graphite);
}

.registre__cell--entry {
    font-family: var(--font-serif);
    font-weight: 700;
    color: var(--vellum-white);
}

.registre__cell--detail {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--vellum-white);
}

.registre__cell--date {
    font-family: var(--font-mono);
    font-weight: 300;
    font-size: clamp(0.7rem, 0.8vw, 0.78rem);
    letter-spacing: 0.06em;
    color: var(--dusty-graphite);
    text-align: right;
}

/* ============================================= */
/* CLAUSE IV — Marginalia                        */
/* ============================================= */
.clause--marginalia {
    min-height: 100vh;
}

.clause__inner--three-col {
    display: grid;
    grid-template-columns: 1fr var(--content-width) 1fr;
    gap: calc(var(--base-unit) * 2);
    max-width: 72em;
    width: 100%;
    margin: 0 auto;
}

.marginalia__center {
    text-align: left;
}

.marginalia__center p {
    margin-bottom: calc(var(--base-unit) * var(--golden));
    text-indent: 2em;
}

.marginalia__center p:first-of-type {
    text-indent: 0;
}

.marginalia__center p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-serif);
    font-size: 4em;
    font-style: italic;
    line-height: 0.8;
    padding-right: 0.1em;
    color: var(--seal-carmine);
    text-shadow: 1px 1px 0 var(--archive-black);
}

.marginalia__gutter {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base-unit) * 1.5);
    padding-top: calc(var(--base-unit) * 6);
}

.marginalia__gutter--left {
    text-align: right;
    align-items: flex-end;
}

.marginalia__gutter--right {
    text-align: left;
    align-items: flex-start;
}

.marginal-note {
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 0.85vw, 0.8rem);
    font-weight: 300;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--dusty-graphite);
    max-width: 16em;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.7s ease-out, filter 0.7s ease-out;
}

.marginal-note.visible {
    opacity: 1;
    filter: blur(0);
}

.fleuron {
    font-size: 1.2rem;
    color: var(--notary-gold);
    line-height: 1;
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.6s ease-out, filter 0.6s ease-out;
}

.fleuron.visible {
    opacity: 1;
    filter: blur(0);
}

/* ============================================= */
/* CLAUSE V — Colophon                           */
/* ============================================= */
.clause--colophon {
    min-height: 60vh;
}

.clause--colophon .clause__inner {
    opacity: 0;
    transition: opacity 1.5s ease-in;
}

.clause--colophon .clause__inner.visible {
    opacity: 1;
}

.clause__heading--colophon {
    margin-bottom: calc(var(--base-unit) * 2);
}

.colophon__body {
    text-align: center;
    margin-bottom: calc(var(--base-unit) * 3);
}

.colophon__line {
    font-family: var(--font-mono);
    font-size: clamp(0.72rem, 0.85vw, 0.8rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    color: var(--dusty-graphite);
    margin-bottom: calc(var(--base-unit) * 0.6);
    line-height: 1.6;
}

.colophon__label {
    font-variant: small-caps;
    letter-spacing: 0.1em;
    color: var(--vellum-white);
    font-weight: 400;
}

.smallcaps {
    font-variant: small-caps;
    letter-spacing: 0.08em;
}

.colophon__seal {
    display: flex;
    justify-content: center;
    margin-bottom: calc(var(--base-unit) * 2);
    opacity: 0;
    transition: opacity 0.8s ease-out;
}

.colophon__seal.visible {
    opacity: 1;
}

.seal-motif--colophon circle {
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 1.2s ease-out;
}

.colophon__seal.visible .seal-motif--colophon circle {
    stroke-dashoffset: 0;
}

.colophon__finis {
    text-align: center;
    font-family: var(--font-serif);
    font-size: clamp(1.1rem, 1.3vw, 1.2rem);
    color: var(--dusty-graphite);
    margin-top: calc(var(--base-unit) * 1.5);
}

/* ============================================= */
/* Responsive — Collapse Marginalia              */
/* ============================================= */
@media (max-width: 1200px) {
    .clause__inner--three-col {
        grid-template-columns: 1fr;
        max-width: var(--content-width);
    }

    .marginalia__gutter {
        display: none;
    }
}

@media (max-width: 600px) {
    .clause {
        padding: calc(var(--base-unit) * 2) calc(var(--base-unit) * 1);
    }

    .ruling-line {
        padding: calc(var(--base-unit) * 1.5) calc(var(--base-unit) * 1);
    }

    .registre__row {
        grid-template-columns: 2.5em 1fr 1fr;
    }

    .registre__cell--date {
        display: none;
    }

    .preamble__title {
        font-size: clamp(1.8rem, 8vw, 3rem);
    }
}

/* ============================================= */
/* Reduced Motion                                */
/* ============================================= */
@media (prefers-reduced-motion: reduce) {
    .preamble__title {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .preamble__epigraph,
    .preamble__citation {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .ruling-path {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }

    .article__scroll-text {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .registre__row {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .marginal-note,
    .fleuron {
        opacity: 1;
        filter: none;
        transition: none;
    }

    .seal-terminator {
        opacity: 1;
        transition: none;
    }

    .clause--colophon .clause__inner {
        opacity: 1;
        transition: none;
    }

    .colophon__seal {
        opacity: 1;
        transition: none;
    }

    .seal-motif--small circle,
    .seal-motif--small text,
    .seal-motif--colophon circle {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
        transition: none;
    }
}