body{
    margin:0;
    background:#07111f;
}

.elderwoods-page{
    background-image: url("images/backgrounds/magic-hero.png");
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-position: top center;
    background-color: #07111f;
}

.elderwoods-page{
    min-height:100vh;
    background:#07111f;
}

.faculty-section{
    min-height:760px;

    padding:90px 0 110px;

    position:relative;
    overflow:hidden;

    text-align:center;
}

.faculty-heading{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:22px;

    margin-bottom:12px;

    transform: translateY(-40px);
}

.faculty-heading span{
    width:120px;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #c99539,
        transparent
    );
}

.faculty-heading h2{
    margin:0;

    color:#e8c77b;

    font-size:32px;
    font-weight:500;

    letter-spacing:4px;
}

.faculty-subtitle{
    margin:0 0 55px;

    color:rgba(232,199,123,.65);

    font-size:15px;
    letter-spacing:1.5px;
}

.faculty-stage{
    width:88vw;
    max-width:1600px;
    height:700px;

    margin:0 auto;
    position:relative;
    top:-140px;

    border: none;
}

.faculty-member{
    width:130px;
    height:130px;

    position:absolute;

    top:50%;
    left:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#c99539;
    border:3px solid #e8c77b;

    color:#07111f;

    font-size:30px;
    font-weight:bold;

    transform:translate(-50%, -50%);

    will-change:transform, opacity;
    backface-visibility:hidden;
    transform-style:preserve-3d;

    overflow:hidden;
}

.faculty-member img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    border-radius:50%;
    display:block;
}

.faculty-person{
    width:300px;
    height:570px;

    background:transparent;
    border:none;
    border-radius:0;

    overflow:visible;

    display:flex;
    align-items:flex-end;
    justify-content:center;
}

.faculty-person img{
    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center bottom;

    border-radius:0;
    display:block;

    pointer-events:none;
}

.professor-click-area{
    position:absolute;

    left:50%;
    bottom:3%;

    width:32%;
    height:72%;

    transform:translateX(-50%);

    border:none;
    background:transparent;

    cursor:pointer;
    z-index:5;
}

.verona img{
    width:83%;
    height:83%;
}

.margaret img{
    width:81%;
    height:81%;
}

.aurora img{
    width:100%;
    height:100%;
}

.alban img{
    width:90%;
    height:90%;
}

.alira img{
    width:100%;
    height:100%;
}

.eliza img{
    width:100%;
    height:100%;
}

.philarius img{
    width:100%;
    height:100%;
}

.ragnar img{
    width:100%;
    height:100%;
}

.arynn img{
    width:100%;
    height:100%;
}

.elderwoods-page{
    background-color:#07111f;

    background-image:url("images/backgrounds/magic-hero.png");

    background-size:100% auto;
    background-repeat:repeat-y;
    background-position:top center;
}

.faculty-book-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0, 6, 14, .30);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .55s ease,
        visibility .35s ease;

    z-index:9999;
}

.faculty-book-modal.open{
    opacity:1;
    visibility:visible;
}

.faculty-book-window{
    position:relative;
    width:min(1000px, 70vw);

    opacity:0;
    transform:translateY(18px);

    transition:
        transform .5s ease,
        opacity .35s ease;
}

.faculty-book-modal.open .faculty-book-window{
    opacity:1;
    transform:translateY(0);
}

.faculty-book-image{
    width:100%;
    height:auto;

    display:block;
}

.book-professor-photo{
    position:absolute;

    left:10%;
    top:13%;

    width:15%;
    height:43%;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    overflow:hidden;
}

.book-professor-photo img{
    width:105%;
    height:135%;

    max-width:none;

    object-fit:contain;
    object-position:center bottom;
}

.book-professor-name{
    position:absolute;
    left:30.7%;
    top:18.1%;
    width:17%;

    font-family:Georgia, serif;
    font-size:15px;
    font-weight:bold;
    color:#2b1b10;
}

.book-professor-data{
    position:absolute;
    inset:0;

    font-family:Georgia, serif;
    font-size:12px;
    color:#392719;
}

.book-data{
    position:absolute;
}

.book-data.birth{
    left:38.8%;
    top:26.7%;
}

.book-data.gender{
    left:36.8%;
    top:33.2%;
}

.book-data.species{
    left:36.8%;
    top:39.3%;
}

.book-data.interests{
    left:31.8%;
    top:49.4%;

    width:18%;
    line-height:1.45;
    line-height:1.6;

    text-align:left;
}

.book-data.beasts{
    left:35.8%;
    top:68.3%;
}

.book-biography{
    position:absolute;

    left:54.3%;
    top:18%;

    width:35%;
    height:25%;

    font-family:Georgia, serif;
    font-size:13px;
    line-height:1.6;

    color:#392719;

    overflow:hidden;
}

.book-additional{
    position:absolute;

    left:55%;
    top:56%;

    width:34%;
    height:30%;

    font-family:Georgia, serif;
    font-size:13px;
    line-height:1.6;

    color:#392719;

    overflow:hidden;
}

.book-close{
    position:absolute;

    top:2.5%;
    right:7.9%;

    width:5%;
    height:10%;

    padding:0;
    border:none;

background:transparent;
outline:none;

    cursor:pointer;
    z-index:10;
}

.places-section{
    min-height:760px;

    padding:70px 0 110px;

    position:relative;
    overflow:hidden;

    text-align:center;
}

.places-heading{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:22px;

    margin-bottom:12px;
}

.places-heading span{
    width:120px;
    height:1px;

    background:linear-gradient(
        to right,
        transparent,
        #c99539,
        transparent
    );
}

.places-heading h2{
    margin:0;

    color:#e8c77b;

    font-size:32px;
    font-weight:500;

    letter-spacing:4px;
}

.places-subtitle{
    margin:0 0 30px;

    color:rgba(232,199,123,.65);

    font-size:15px;
    letter-spacing:1.5px;
}

.places-film-machine{
    width:min(1700px, 96vw);

    margin:70px auto 0;

    display:flex;
    align-items:center;
    justify-content:center;

    position:relative;
}

.film-reel{
    width:430px;
    height:620px;

    flex-shrink:0;

    position:relative;
    z-index:3;
}


/* Корпус барабана */
.reel-body{
    width:100%;
    height:100%;

    display:block;

    object-fit:contain;
}


/* Контейнер верхней катушки */
.reel-top-wrap{
    position:absolute;

    left:50%;
    top:0;

    width:100%;

    transform:translateX(-50%);

    z-index:4;

    pointer-events:none;
}


/* Сама верхняя катушка */
.reel-top{
    width:100%;
    height:auto;

    display:block;

    transform-origin:center center;
}


/* Контейнер плёнки */
.film-strip-shell{
    flex:1;

    height:240px;

    margin:0 -45px;

    position:relative;
    z-index:1;

    display:flex;
    align-items:center;

    transform:translateY(-20px);
}


/* Основная лента */
.film-strip-placeholder{
    width:100%;
    height:180px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#05080d;

    border-top:11px solid #17120d;
    border-bottom:11px solid #17120d;

    color:#e8c77b;

    font-size:22px;
    letter-spacing:4px;

    position:relative;

    overflow:hidden;
}


/* Перфорация */
.film-strip-placeholder::before,
.film-strip-placeholder::after{
    content:"";

    position:absolute;

    left:0;

    width:100%;
    height:12px;

    background:
        repeating-linear-gradient(
            to right,
            transparent 0px,
            transparent 8px,
            #c99539 8px,
            #c99539 18px,
            transparent 18px,
            transparent 26px
        );
}

.film-strip-placeholder::before{
    top:6px;
}

.film-strip-placeholder::after{
    bottom:6px;
}

/* Область с кадрами */
.film-frames{
    position:absolute;

    left:0;
    top:24px;
    bottom:24px;

    display:flex;

    width:200%;

    animation:filmMove 14s linear infinite reverse;
}


/* Один кадр */
.film-frame{
    flex:0 0 12.5%;

    height:100%;

    box-sizing:border-box;

    border-right:2px solid #8b642c;

    overflow:hidden;

    cursor:pointer;
    text-decoration:none;
}


/* Изображение внутри кадра */
.film-frame img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    transition:transform .35s ease, filter .35s ease;
}

.film-frame:hover img{
    transform:scale(1.05);
    filter:brightness(1.15);
}


/* Движение плёнки */
@keyframes filmMove{
    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }
}

.places-film-machine{
    transform:translateY(-100px);
}

.place-modal{
    position:fixed;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0, 5, 12, .55);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .45s ease,
        visibility .35s ease;

    z-index:9999;
}


.place-modal.open{
    opacity:1;
    visibility:visible;
}


.place-modal-window{
    position:relative;

    width:min(900px, 82vw);

    opacity:0;

    transition:opacity .35s ease;
}

.place-modal.open .place-modal-window{
    opacity:1;
}

/* Сам макет плёнки */
.place-modal-frame{
    width:100%;
    height:auto;

    display:block;

    pointer-events:none;
}


/* Фото слева */
.place-modal-photo{
    position:absolute;

    left:6.5%;
    top:15%;

    width:38%;
    height:70%;

    overflow:hidden;
}


.place-modal-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;
}


/* Название справа */
.place-modal-name{
    position:absolute;

    left:50%;
    top:21%;

    width:40%;

    color:#d5a34d;

    font-family:Georgia, serif;

    font-size:27px;
    font-weight:normal;

    letter-spacing:2px;

    text-align:center;
}


/* Описание справа */
.place-modal-description{
    position:absolute;

    left:49%;
    top:30%;

    width:43%;
    height:48%;

    color:rgba(235, 226, 205, .88);

    font-family:Georgia, serif;

    font-size:14px;
    line-height:2.8;

    text-align:left;

    overflow:hidden;
}

/* Невидимая кнопка поверх нарисованного X */
.place-modal-close{
    position:absolute;

    top:2%;
    right:1.5%;

    width:7%;
    height:11%;

    padding:0;

    border:none;

    background:transparent;

    cursor:pointer;

    z-index:10;
}

/* Точная посадка фотографии в reel-cover */
.place-modal-photo{
    position:absolute;

    left:5.4%;
    top:12.2%;

    width:38.1%;
    height:76.7%;

    overflow:hidden;

    border-radius:18px;

    padding:4px;
    box-sizing:border-box;
}

.place-modal-photo img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    border-radius:10px;
}

/* =========================
   ELDERWOODS NOTICE BOARD
   ========================= */

.notice-board-section{
    position:relative;
    width:100%;
    padding:40px 0 120px;
    text-align:center;
    overflow:visible;

    transform:translateY(-250px);
}


/* Заголовок */

.notice-board-heading{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:22px;

    margin-bottom:12px;
}

.notice-board-heading span{
    width:120px;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #c99539,
            transparent
        );
}

.notice-board-heading h2{
    margin:0;

    color:#e8c77b;

    font-size:32px;
    font-weight:500;

    letter-spacing:4px;
}


/* Подзаголовок */

.notice-board-subtitle{
    margin:0 0 35px;

    color:rgba(232,199,123,.65);

    font-size:15px;

    letter-spacing:1.5px;
}


/* Сама доска */

.notice-board-wrap{
    width:min(1600px, 94vw);

    margin:0 auto;

    position:relative;
}

.notice-board-image{
    width:100%;
    height:auto;

    display:block;

    object-fit:contain;
}

.board-task{
    position:absolute;
    height:auto;

    z-index:5;

    cursor:default;

    filter:drop-shadow(0 5px 6px rgba(0,0,0,.45));

    transition:
        transform .25s ease,
        filter .25s ease;
}


/* =========================
   РАСПОЛОЖЕНИЕ ЗАДАНИЙ
========================= */

.task-1{
    width:7%;
    left:16%;
    top:29%;
    transform:rotate(-6deg);
}

.task-2{
    width:7%;
    left:26%;
    top:40%;
    transform:rotate(3deg);
}

.task-3{
    width:7%;
    left:37%;
    top:30%;
    transform:rotate(-2deg);
}

.task-4{
    width:7%;
    left:48%;
    top:36%;
    transform:rotate(-1deg);
}

.task-5{
    width:7%;
    left:58%;
    top:28%;
    transform:rotate(6deg);
}


/* Второй ряд */

.task-6{
    width:7%;
    left:67%;
    top:39%;
    transform:rotate(-4deg);
}

.task-7{
    width:7%;
    left:78%;
    top:30%;
    transform:rotate(3deg);
}

.task-8{
    width:7%;
    left:17%;
    top:57%;
    transform:rotate(4deg);
}

.task-9{
    width:7%;
    left:31%;
    top:55%;
    transform:rotate(-5deg);
}

.task-10{
    width:7%;
    left:42%;
    top:58%;
    transform:rotate(2deg);
}

.task-11{
    width:7%;
    left:53%;
    top:54%;
    transform:rotate(-3deg);
}

.task-12{
    width:7%;
    left:64%;
    top:58%;
    transform:rotate(5deg);
}

.task-13{
    width:7%;
    left:75%;
    top:55%;
    transform:rotate(-2deg);
}


/* Несколько дополнительных,
   чтобы доска выглядела менее ровной */

.task-14{
    width:7%;
    left:24%;
    top:72%;
    transform:rotate(-3deg);
}

.task-15{
    width:7%;
    left:48%;
    top:70%;
    transform:rotate(4deg);
}

.task-16{
    width:7%;
    left:70%;
    top:68%;
    transform:rotate(-5deg);
}


/* =========================
   УВЕЛИЧЕНИЕ ПРИ НАВЕДЕНИИ
========================= */

.task-1:hover{
    transform:rotate(-6deg) scale(3.5);
    z-index:20;
}

.task-2:hover{
    transform:rotate(3deg) scale(3.5);
    z-index:20;
}

.task-3:hover{
    transform:rotate(-2deg) scale(3.5);
    z-index:20;
}

.task-4:hover{
    transform:rotate(-1deg) scale(3.5);
    z-index:20;
}

.task-5:hover{
    transform:rotate(6deg) scale(3.5);
    z-index:20;
}

.task-6:hover{
    transform:rotate(-4deg) scale(3.5);
    z-index:20;
}

.task-7:hover{
    transform:rotate(3deg) scale(3.5);
    z-index:20;
}

.task-8:hover{
    transform:rotate(4deg) scale(3.5);
    z-index:20;
}

.task-9:hover{
    transform:rotate(-5deg) scale(3.5);
    z-index:20;
}

.task-10:hover{
    transform:rotate(2deg) scale(3.5);
    z-index:20;
}

.task-11:hover{
    transform:rotate(-3deg) scale(3.5);
    z-index:20;
}

.task-12:hover{
    transform:rotate(5deg) scale(3.5);
    z-index:20;
}

.task-13:hover{
    transform:rotate(-2deg) scale(3.5);
    z-index:20;
}

.task-14:hover{
    transform:rotate(-3deg) scale(3.5);
    z-index:20;
}

.task-15:hover{
    transform:rotate(4deg) scale(3.5);
    z-index:20;
}

.task-16:hover{
    transform:rotate(-5deg) scale(3.5);
    z-index:20;
}

/* =========================
   STUDENT GUIDE
========================= */

.student-guide-section{
    position:relative;

    width:100%;

    padding:70px 0 110px;

    text-align:center;
}


.student-guide-heading{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:22px;

    margin-bottom:12px;
}

.student-guide-heading span{
    width:120px;
    height:1px;

    background:
        linear-gradient(
            to right,
            transparent,
            #c99539,
            transparent
        );
}

.student-guide-heading h2{
    margin:0;

    color:#e8c77b;

    font-size:32px;
    font-weight:500;

    letter-spacing:4px;
}


.student-guide-subtitle{
    margin:0 0 35px;

    color:rgba(232,199,123,.65);

    font-size:15px;

    letter-spacing:1.5px;
}


.student-guide-book{
    width:min(1400px, 90vw);
    margin:0 auto;
    position:relative;

    perspective:1800px;
}


.student-guide-book-image{
    width:100%;
    height:auto;

    display:block;
}

.guide-left-page{
    position:absolute;

    left:23.9%;
    top:24.5%;

    width:22.5%;
    height:53%;
}


.guide-right-page{
    position:absolute;

    left:53.3%;
    top:24.5%;

    width:22.5%;
    height:53%;
}

.guide-arrow{
    position:absolute;
    top:50%;

    width:46px;
    height:46px;

    border:2px solid #b78332;
    border-radius:50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #5a4023 0%,
            #302315 45%,
            #17120d 100%
        );

    color:#e8c77b;

    font-family:Georgia, serif;
    font-size:31px;
    line-height:1;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;
    z-index:20;

    box-shadow:
        inset 0 0 0 2px rgba(232,199,123,.15),
        inset 0 0 8px rgba(0,0,0,.65),
        0 2px 5px rgba(0,0,0,.55);

    transform:translateY(-50%);

    transition:
        border-color .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.guide-arrow:hover{
    color:#ffd978;
    border-color:#e8c77b;

    box-shadow:
        inset 0 0 0 2px rgba(255,220,130,.22),
        inset 0 0 8px rgba(0,0,0,.55),
        0 0 10px rgba(201,149,57,.45);

    transform:translateY(-50%) scale(1.08);
}

.guide-prev{
    left:9.5%;
    top:49%;
    text-indent:-2px;
    padding-bottom:6px;
}

.guide-next{
    right:9.5%;
    top:49%;
    text-indent:2px;
    padding-bottom:6px;
}

.guide-left-page,
.guide-right-page{
    display:flex;
    align-items:center;
    justify-content:center;

    color:#4a2d18;

    font-family:Georgia, serif;
    font-size:20px;
    letter-spacing:2px;

    text-align:center;
}

.guide-cover-content{
    width:100%;
    height:100%;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    color:#4a2d18;

    font-family:Georgia, serif;

    text-align:center;
}

.guide-cover-small{
    margin-bottom:20px;

    font-size:14px;
    letter-spacing:3px;
}

.guide-cover-title{
    font-size:38px;
    font-weight:bold;

    letter-spacing:5px;
}

.guide-cover-line{
    width:55%;
    height:1px;

    margin:22px 0;

    background:#7b5832;
}

.guide-cover-subtitle{
    font-size:16px;
    font-style:italic;

    letter-spacing:1px;
}

.schedule-page{
    width:100%;
    height:100%;
    box-sizing:border-box;

    font-family:Georgia, serif;
    color:#4a2d18;
    text-align:left;
}

.guide-left-page .schedule-page{
    transform:translate(-20%, -6%) scale(1.30);
}

.guide-right-page .schedule-page{
    transform:translate(24%, -6%) scale(1.30);
}

.schedule-title{
    margin:0 0 4px;
    text-align:center;
    font-size:19px;
    letter-spacing:2px;
}

.schedule-ornament{
    margin-bottom:12px;
    text-align:center;
    font-size:10px;
}

.schedule-day{
    margin-bottom:13px;
}

.schedule-day h4{
    margin:0 0 7px;
    text-align:center;
    font-size:15px;
    letter-spacing:2px;
}

.schedule-class{
    display:grid;
    grid-template-columns:82px 1fr;
    column-gap:7px;
    margin-bottom:5px;
    line-height:1.1;
}

.schedule-class span{
    grid-row:1 / 3;
    padding-top:2px;
    font-size:11px;
    white-space:nowrap;
}

.schedule-class strong{
    font-size:12px;
    font-weight:bold;
    letter-spacing:.3px;
}

.schedule-class small{
    margin-top:2px;
    font-size:10px;
    font-style:italic;
}

.schedule-break,
.schedule-end,
.schedule-optional{
    margin:5px 0;
    padding:3px 0;
    border-top:1px solid rgba(90,55,25,.25);
    border-bottom:1px solid rgba(90,55,25,.25);

    text-align:center;
    font-size:10px;
    font-style:italic;
}

.schedule-note{
    margin-top:18px;
    padding-top:10px;
    border-top:1px solid rgba(90,55,25,.4);
    text-align:center;
}

.schedule-note h4{
    margin:0 0 10px;
    font-size:14px;
    letter-spacing:1.5px;
}

.schedule-note p{
    margin:0 0 10px;
    font-size:10px;
    line-height:1.4;
}

.schedule-note small{
    font-size:9px;
    font-style:italic;
}

.guide-left-page,
.guide-right-page{
    transition:
        transform .28s ease,
        opacity .22s ease,
        filter .28s ease;
}

.guide-left-page,
.guide-right-page{
    position:absolute;
    overflow:visible;
}

.guide-left-page::after,
.guide-right-page::after{
    content:"";
    position:absolute;
    inset:-2%;

    background:
        linear-gradient(
            to right,
            rgba(255,244,214,.96),
            rgba(226,200,153,.94)
        );

    border-radius:4px;

    opacity:0;
    pointer-events:none;
    z-index:50;

    box-shadow:
        0 4px 12px rgba(55,32,14,.28);
}

.catalog-page{
    width:100%;
    height:100%;
    box-sizing:border-box;

    font-family:Georgia, serif;
    color:#4a2d18;
    text-align:left;
}

.catalog-header{
    margin-bottom:14px;
    text-align:center;
}

.catalog-header h3{
    margin:0;
    font-size:18px;
    letter-spacing:2px;
}

.catalog-ornament{
    margin:3px 0;
    font-size:9px;
}

.catalog-header small{
    font-size:9px;
    font-style:italic;
    letter-spacing:1px;
}


.catalog-columns{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.catalog-column{
    min-width:0;
}

.catalog-category{
    margin-bottom:15px;
}

.catalog-category h4{
    margin:0 0 6px;
    padding-bottom:3px;

    border-bottom:1px solid rgba(90,55,25,.45);

    text-align:center;
    font-size:11px;
    letter-spacing:1.2px;
}


.catalog-item{
    display:flex;
    align-items:flex-end;

    margin-bottom:3px;

    font-size:8.5px;
    line-height:1.2;
}

.catalog-item span{
    display:flex;
    flex:1;
    min-width:0;
    align-items:flex-end;
}

.catalog-item span::after{
    content:"";

    flex:1;
    min-width:5px;

    margin:0 4px 2px;

    border-bottom:1px dotted rgba(74,45,24,.45);
}

.catalog-item b{
    flex-shrink:0;

    font-size:8.5px;
    font-weight:normal;
}


.catalog-note{
    margin-top:18px;
    padding-top:8px;

    border-top:1px solid rgba(90,55,25,.35);

    text-align:center;
    font-size:9px;
    font-style:italic;
}

.guide-left-page .catalog-page{
    transform:translate(-20%, -2%) scale(1.38);
}

.guide-right-page .catalog-page{
    transform:translate(23%, -2%) scale(1.38);
}

.guide-turn-page{
    position:absolute;

    left:47%;
    top:2%;

    width:45%;
    height:92%;

    object-fit:fill;

    z-index:15;
    pointer-events:none;

    opacity:0;

    transform-origin:6.4% center;
    transform-style:preserve-3d;
    backface-visibility:visible;
}

.guide-turn-page.turn-forward{
    opacity:1;
    animation:guidePageForward .85s ease-in-out forwards;
}

@keyframes guidePageForward{

    0%{
        transform:rotateY(0deg);
        filter:brightness(1);
    }

    35%{
        filter:brightness(.82);
    }

    50%{
        filter:brightness(.68);
    }

    70%{
        filter:brightness(.85);
    }

100%{
    transform:rotateY(-180deg);
    filter:brightness(1);
}
}

.guide-turn-page.turn-backward{
    opacity:1;
    animation:guidePageBackward .85s ease-in-out forwards;
}

@keyframes guidePageBackward{

    0%{
        transform:rotateY(-180deg);
        filter:brightness(1);
    }

    35%{
        filter:brightness(.82);
    }

    50%{
        filter:brightness(.68);
    }

    70%{
        filter:brightness(.85);
    }

    100%{
        transform:rotateY(0deg);
        filter:brightness(1);
    }
}

.beast-market-page{
    width:100%;
    height:100%;
    box-sizing:border-box;

    font-family:Georgia, serif;
    color:#4a2d18;
    text-align:left;
}

.beast-market-header{
    margin-bottom:14px;
    text-align:center;
}

.beast-market-header h3{
    margin:0;
    font-size:18px;
    letter-spacing:1.6px;
}

.beast-market-ornament{
    margin:3px 0;
    font-size:9px;
}

.beast-market-header small{
    font-size:9px;
    font-style:italic;
    letter-spacing:1px;
}


/* заголовки колонок */

.beast-market-labels{
    display:grid;
    grid-template-columns:1fr 48px 48px;
    gap:7px;

    margin-bottom:5px;
    padding-bottom:5px;

    border-bottom:1px solid rgba(90,55,25,.5);

    font-size:8px;
    font-weight:bold;
    letter-spacing:.7px;
}

.beast-market-labels span:nth-child(2),
.beast-market-labels span:nth-child(3){
    text-align:right;
}


/* строки зверей */

.beast-market-item{
    display:grid;
    grid-template-columns:1fr 48px 48px;
    gap:7px;
    align-items:center;

    padding:6px 0;

    border-bottom:1px dotted rgba(74,45,24,.35);

    font-size:10px;
}

.beast-market-item span{
    min-width:0;
}

.beast-market-item b{
    text-align:right;
    font-size:9.5px;
    font-weight:normal;
    white-space:nowrap;
}


/* примечание */

.beast-market-note{
    margin-top:14px;
    padding-top:8px;

    border-top:1px solid rgba(90,55,25,.4);

    text-align:center;
    font-size:8px;
    line-height:1.4;
    font-style:italic;
}

.guide-left-page .beast-market-page{
    transform:translate(-20%, -2%) scale(1.38);
}

.guide-right-page .beast-market-page{
    transform:translate(23%, -2%) scale(1.38);
}

/* =========================
   ACADEMY RULES
========================= */

.rules-page{
    width:100%;
    height:100%;
    box-sizing:border-box;

    font-family:Georgia, serif;
    color:#4a2d18;
    text-align:left;
}


.rules-header{
    margin-bottom:14px;
    text-align:center;
}

.rules-header h3{
    margin:0;

    font-size:18px;
    letter-spacing:2px;
}

.rules-ornament{
    margin:4px 0 10px;

    font-size:9px;
    text-align:center;
}


/* Список правил */

.rules-list{
    width:100%;
}


.rule-item{
    display:grid;
    grid-template-columns:27px 1fr;
    column-gap:9px;

    padding:7px 0;

    border-bottom:1px solid rgba(74,45,24,.25);
}


/* Номер правила */

.rule-item b{
    padding-top:1px;

    font-size:10px;
    font-weight:bold;

    letter-spacing:.5px;

    text-align:center;
}


/* Текст */

.rule-item p{
    margin:0;

    font-size:9px;
    line-height:1.35;

    letter-spacing:.15px;
}

.guide-left-page .rules-page{
    transform:translate(-20%, -2%) scale(1.38);
}

.guide-right-page .rules-page{
    transform:translate(23%, -2%) scale(1.38);
}

.place-legends{
    width:100%;
    box-sizing:border-box;

    display:grid;
    grid-template-columns:1fr;
    row-gap:6px;

    text-align:left;
}

.place-legend{
    margin:0;
}

.place-legend h4{
    margin:0 0 7px;
    color:#d6b16a;
    font-family:Georgia, serif;
    font-size:12px;
    line-height:1;
    letter-spacing:.5px;
}

.place-legend p{
    margin:0;
    color:#d8cbb4;
    font-family:Georgia, serif;
    font-size:13px;
    line-height:1.2;
}

/* ORION VERONA — portrait */
.book-professor-photo img[src*="verona2"]{
    width:120%;
    height:120%;

    max-width:none;

    object-fit:contain;
    object-position:center 95%;
}

.book-professor-photo img[src*="margaret2"]{
    width:110%;
    height:120%;

    object-fit:contain;
    object-position:center 98%;
}

#bookBeasts{
    display:block;

    width:100%;
    max-width:150px;

    white-space:normal;
    text-align:center;

    font-size:12px;
    line-height:1.15;

    transform:translateX(-30px);
}

#bookBirth{
    font-size:12px;
    white-space:nowrap;

        font-family: Georgia, serif;
    font-variant-numeric: lining-nums;
}

/* =========================
   ACTIVE NAVIGATION
========================= */

.nav-link{
    position:relative;
}

.nav-link.active{
    color:#d9b45b;
}

.nav-link.active::after{
    content:"";
    position:absolute;

    left:50%;
    bottom:-18px;

    width:72px;
    height:1px;

    background:#d9b45b;
    transform:translateX(-50%);
}

.nav-link.active::before{
    content:"◇";
    position:absolute;

    left:50%;
    bottom:-25px;

    transform:translateX(-50%);

    color:#d9b45b;
    background:#07111f;

    padding:0 6px;

    font-size:13px;
    line-height:14px;

    z-index:2;
}