:root {
    --codex-ink: #2a251d;
    --codex-faded-ink: #625744;
    --codex-gold: #9f7940;
    --codex-paper: #eee1bd;
}

body.animas-beginning-page {
    min-height: 100vh;
    margin: 0;
    color: var(--codex-ink);
    font-family: Georgia, "Times New Roman", serif;
    background: #ddcca3;
}

.beginning-codex {
    box-sizing: border-box;
    min-height: 100vh;
    padding: calc(clamp(5.94rem, 8.75vw, 7.81rem) + clamp(.35rem, 1vw, .8rem)) clamp(1.1rem, 3vw, 3rem) clamp(1.1rem, 3vw, 3rem);
}

.beginning-header {
    position: fixed;
    height: clamp(5.94rem, 8.75vw, 7.81rem);
    padding: .94rem clamp(1.56rem, 5vw, 6.88rem);
    background: linear-gradient(180deg, rgba(48, 39, 24, .94), rgba(48, 39, 24, .76) 74%, transparent);
}

/* El Archivo conserva su tamaño normal; este capítulo abre su menú un 25% mayor. */
.beginning-header .archive-nav { gap: clamp(1.38rem, 3.25vw, 4.25rem); }
.beginning-header .archive-nav--left { padding-right: clamp(2.5rem, 6.25vw, 8.75rem); }
.beginning-header .archive-nav--right { padding-left: clamp(2.5rem, 6.25vw, 8.75rem); }
.beginning-header .archive-nav a { font-size: clamp(.85rem, 1.15vw, 1.25rem); }
.beginning-header .archive-brand { width: clamp(4.06rem, 5.5vw, 5.63rem); height: clamp(4.75rem, 7vw, 6.25rem); }

/* Sólo quienes hayan iniciado sesión ven el desplazamiento de la barra de WordPress. */
body.admin-bar .beginning-header { top: 50px; }
body.admin-bar .beginning-header::before {
    position: absolute;
    z-index: -1;
    top: -50px;
    right: 0;
    left: 0;
    height: 50px;
    content: "";
    background: rgba(48, 39, 24, .94);
}

.beginning-leaf {
    --parchment-frame: 140px;
    position: relative;
    box-sizing: border-box;
    width: min(74rem, 100%);
    min-height: min(48rem, calc(100vh - 8rem));
    margin: 0 auto;
    text-align: center;
    padding: var(--parchment-frame);
    overflow: hidden;
    background: #ddcca3;
}

.beginning-frame-piece {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

/* Esquinas: una única imagen, girada sólo donde corresponde. */
.beginning-frame-piece--corner-tl,
.beginning-frame-piece--corner-tr,
.beginning-frame-piece--corner-br,
.beginning-frame-piece--corner-bl {
    width: var(--parchment-frame);
    height: var(--parchment-frame);
    background: url("../images/parchment-frame/paper-corner-top-left.png") top left / 100% 100% no-repeat;
}
.beginning-frame-piece--corner-tl { top: 0; left: 0; }
.beginning-frame-piece--corner-tr { top: 0; right: 0; transform: scaleX(-1); }
.beginning-frame-piece--corner-br { right: 0; bottom: 0; transform: rotate(180deg); }
.beginning-frame-piece--corner-bl { bottom: 0; left: 0; transform: scaleY(-1); }

/* Bordes: se repiten completos, sin recortar; el lado opuesto gira 180°. */
.beginning-frame-piece--top,
.beginning-frame-piece--bottom {
    right: var(--parchment-frame);
    left: var(--parchment-frame);
    height: var(--parchment-frame);
    background: url("../images/parchment-frame/paper-edge-horizontal-seamless.png") left top / auto 100% repeat-x;
}
.beginning-frame-piece--top { top: 0; }
.beginning-frame-piece--bottom { bottom: 0; transform: rotate(180deg); }
.beginning-frame-piece--left,
.beginning-frame-piece--right {
    top: var(--parchment-frame);
    bottom: var(--parchment-frame);
    width: var(--parchment-frame);
    background: url("../images/parchment-frame/paper-edge-vertical-seamless.png") left top / 100% auto repeat-y;
}
.beginning-frame-piece--left { left: 0; }
.beginning-frame-piece--right { right: 0; transform: rotate(180deg); }

.beginning-leaf > :not(.beginning-frame-piece) {
    position: relative;
    z-index: 2;
}

.beginning-leaf__content {
    display: flow-root;
    box-sizing: border-box;
    min-height: calc(min(48rem, calc(100vh - 8rem)) - (var(--parchment-frame) * 2));
    margin: 0;
    padding: 0;
    background: url("../images/parchment-frame/paper-center-seamless.png") repeat;
}

.beginning-leaf h1 {
    margin: clamp(2.2rem, 6vw, 5rem) auto 0;
    color: #3a2a17;
    font-family: var(--animas-font-display);
    font-size: clamp(3.3rem, 8vw, 7.1rem);
    font-weight: 400;
    letter-spacing: .01em;
    line-height: .88;
}
.beginning-leaf h1 span { display: block; }

.beginning-title-rule {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    max-width: 24rem;
    margin: clamp(1.6rem, 3vw, 2.75rem) auto clamp(3.5rem, 8vw, 6rem);
    color: var(--codex-gold);
}
.beginning-title-rule::before,
.beginning-title-rule::after { flex: 1; height: 1px; content: ""; background: linear-gradient(90deg, transparent, currentColor); }
.beginning-title-rule::after { transform: scaleX(-1); }
.beginning-light-glyph {
    display: block;
    width: 2.75rem;
    height: 4.25rem;
    object-fit: contain;
    object-position: center;
}

.beginning-prose { max-width: 45rem; margin: 0 auto; padding-bottom: clamp(3rem, 7vw, 6rem); text-align: left; }
.beginning-prose h2 { margin: clamp(3.5rem, 8vw, 6rem) 0 clamp(1.25rem, 3vw, 2rem); color: #64451f; font-family: var(--animas-font-display); font-size: clamp(1.65rem, 3.5vw, 2.55rem); font-weight: 400; letter-spacing: .025em; line-height: 1.05; text-align: center; }
.beginning-prose h2:first-child { margin-top: 0; }
.beginning-prose p { margin: 0 0 1.35rem; font-size: clamp(1.02rem, 1.52vw, 1.28rem); line-height: 1.75; }
.beginning-dropcap::first-letter { float: left; margin: .1em .14em 0 0; color: #956c32; font-family: var(--animas-font-display); font-size: 4.5em; line-height: .7; }

@media (max-width: 620px) {
    .beginning-codex { padding: calc(5.625rem + .8rem) 0 .8rem; }
    .beginning-header { height: 5.625rem; padding: .625rem 1.44rem; }
    .beginning-header .archive-mobile-trigger { width: 3.25rem; height: 3.25rem; }
    .beginning-header .archive-brand { width: 3.44rem; height: 4.56rem; }
    .beginning-leaf {
        --parchment-frame: 24px;
        min-height: calc(100vh - 5.725rem);
        padding: var(--parchment-frame);
    }
    .beginning-leaf__content { min-height: calc(100vh - 5.725rem - (var(--parchment-frame) * 2)); padding: 0; }
    .beginning-leaf h1 { margin-top: 2.5rem; font-size: clamp(2.2rem, 10.6vw, 3.05rem); line-height: .94; }
    .beginning-title-rule { max-width: 15rem; margin: 1.35rem auto 3.25rem; }
    .beginning-light-glyph { width: 2.375rem; height: 3.625rem; }
    .beginning-prose { width: min(100% - 2.1rem, 45rem); text-align: left; }
    .beginning-prose h2 { margin: 3.5rem 0 1.25rem; font-size: 1.7rem; }
    .beginning-prose p { font-size: 1rem; line-height: 1.7; }
}