/* five characters outside every common CJK font, cut from Jigmo (CC0) */
@font-face {
    font-family: "SgyyRare";
    src: url(rare.woff2) format("woff2");
    unicode-range: U+29166, U+26A77, U+26A87, U+298F5, U+291D5;
}

:root {
    --pw: 420px;
    --ph: 600px;
    --fs: 20px;
    --lh: 34px;
    --cols: 10;
    --rows: 24;
    --bx: 30px;
    --ink: #22180f;
    --zhu: #a8382a;
    --rule: rgba(168, 56, 42, .42);
    --paper: #efe3c8;
    --paper-2: #e6d6b4;
    --serif: "Noto Serif SC", "SgyyRare", "Songti SC", "STSong", "SimSun", serif;
    --brush: "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
    --flip: 900ms;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--serif);
    color: var(--ink);
    background:
        radial-gradient(ellipse 70% 55% at 50% 42%, rgba(255, 196, 120, .16), transparent 70%),
        radial-gradient(ellipse 120% 90% at 50% 50%, #3a281b 0%, #22170f 55%, #0f0a06 100%);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

/* faint wood grain on the desk */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(92deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 9px, rgba(255, 220, 170, .025) 9px 10px, transparent 10px 23px);
    pointer-events: none;
}

.fades { transition: opacity .6s; }
body.idle .fades { opacity: 0; pointer-events: none; }

.home-link {
    position: fixed;
    top: 16px;
    left: 18px;
    z-index: 30;
    font: 600 13px/1 Inter, system-ui, sans-serif;
    letter-spacing: .5px;
    color: rgba(255, 238, 210, .7);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .25);
    white-space: nowrap;
}

.home-link:hover { color: #fff; }

.tools {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 30;
    display: flex;
    gap: 8px;
}

.tool {
    font: 600 14px/1 var(--serif);
    color: #f3e4c4;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(243, 228, 196, .22);
    border-radius: 999px;
    min-width: 36px;
    height: 34px;
    padding: 0 12px;
    cursor: pointer;
}

.tool:hover { background: rgba(168, 56, 42, .55); }

.hint {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 12px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(243, 228, 196, .45);
    z-index: 5;
}

/* ---------- desk and book ---------- */

.desk {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2600px;
    padding-top: 8px;
}

.book {
    position: relative;
    width: calc(var(--pw) * 2);
    height: var(--ph);
    transform-style: preserve-3d;
    transition: transform var(--flip) cubic-bezier(.45, .05, .25, 1);
}

.book.single { width: var(--pw); }

/* closed: only the cover, left of the spine, is showing - slide it to the centre */
.book.closed { transform: translateX(calc(var(--pw) / 2)); }
.book.single.closed { transform: none; }

/* soft shadow the book casts on the desk */
.book::before {
    content: "";
    position: absolute;
    left: 2%;
    right: 2%;
    bottom: -3%;
    height: 12%;
    background: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, .55), transparent 70%);
    filter: blur(10px);
    transform: translateZ(-2px);
}

.book.closed::before { left: 0; right: 50%; }
.book.single::before { left: 0; right: 0; }

.slot, .leaf {
    position: absolute;
    top: 0;
    width: var(--pw);
    height: var(--ph);
}

.slot-l { left: 0; }
.slot-r { left: var(--pw); }
.book.single .slot-r { display: none; }
.slot:empty { visibility: hidden; }

/* page edges: read pages pile up on the right, unread ones on the left */
.stack {
    position: absolute;
    top: 3px;
    height: calc(var(--ph) - 1px);
    background:
        repeating-linear-gradient(90deg, #d9c69e 0 1px, #f1e6cc 1px 2px, #e2d1ab 2px 3px);
    border-radius: 2px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .35);
}

.stack-l { right: calc(var(--pw) * 2 - 1px); width: var(--sl, 8px); }
.stack-r { left: calc(var(--pw) * 2 - 1px); width: var(--sr, 2px); }
.book.single .stack { display: none; }
.book.closed .stack-r { display: none; }
.book.closed .stack-l { width: 0; }

.ribbon {
    position: absolute;
    left: calc(var(--pw) - 9px);
    top: calc(var(--ph) - 6px);
    width: 9px;
    height: 58px;
    background: linear-gradient(90deg, #6e1b14, #b3362a 45%, #7d2017);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .4);
    transform-origin: top;
    transform: rotate(4deg);
}

.book.single .ribbon { left: calc(var(--pw) - 30px); }
.book.closed .ribbon { display: none; }

/* ---------- pages ---------- */

.page {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: var(--paper);
    display: flex;
    justify-content: center;
    padding-top: calc(var(--ph) * .085);
}

.page::before {
    /* fibres of the paper */
    content: "";
    position: absolute;
    inset: 0;
    filter: url(#paperGrain);
    background: #000;
    opacity: .9;
    mix-blend-mode: multiply;
    pointer-events: none;
}

.page::after {
    /* age: darker edges, a hint of foxing */
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 85% 80% at 50% 50%, transparent 55%, rgba(120, 82, 36, .22) 100%),
        radial-gradient(circle at 82% 88%, rgba(150, 100, 40, .08), transparent 18%),
        radial-gradient(circle at 15% 12%, rgba(150, 100, 40, .06), transparent 14%);
    pointer-events: none;
}

/* the fold at the spine */
.gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 22%;
    pointer-events: none;
    z-index: 2;
}

.side-l .gutter {
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(80, 52, 20, .05) 55%, rgba(60, 38, 14, .18) 88%, rgba(40, 24, 8, .34));
}

.side-r .gutter {
    left: 0;
    background: linear-gradient(270deg, transparent, rgba(80, 52, 20, .05) 55%, rgba(60, 38, 14, .16) 88%, rgba(40, 24, 8, .3));
}

.book.single .side-l .gutter { width: 10%; }

/* 四周双边: thick outer rule, thin inner rule */
.frame {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    border: max(2px, calc(var(--fs) * .14)) solid var(--zhu);
    padding: 2px;
    opacity: .9;
}

.side-l .frame { margin-left: calc(var(--pw) * -.02); }
.side-r .frame { margin-left: calc(var(--pw) * .02); }

.frame-in {
    display: flex;
    border: 1px solid var(--zhu);
}

.side-r .frame-in { flex-direction: row-reverse; }

/* 版心: the narrow strip with title, fishtail and page number */
.banxin {
    width: var(--bx);
    writing-mode: vertical-rl;
    font-size: calc(var(--fs) * .62);
    line-height: var(--bx);
    color: var(--ink);
    display: flex;
    align-items: center;
    padding: calc(var(--fs) * .5) 0;
    letter-spacing: .15em;
}

.side-r .banxin { border-left: 1px solid var(--zhu); }
.side-l .banxin { border-right: 1px solid var(--zhu); }

.banxin .yuwei {
    width: 62%;
    height: calc(var(--fs) * .9);
    margin: calc(var(--fs) * .5) 0;
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 62%, 0 100%);
    opacity: .85;
}

.banxin .bx-gap { flex: 1; }
.banxin .bx-title { font-weight: 600; }

.text {
    writing-mode: vertical-rl;
    width: calc(var(--cols) * var(--lh));
    height: calc(var(--rows) * var(--fs));
    box-sizing: content-box;
    padding: calc(var(--fs) * .3) 0;
    font-size: var(--fs);
    line-height: var(--lh);
    text-align: justify;
    line-break: strict;
    overflow: hidden;
    color: var(--ink);
    text-shadow: 0 0 .6px rgba(34, 24, 15, .55);
    background: repeating-linear-gradient(to left, transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh));
}

.text > div { margin: 0; }
.text .v { padding-top: 2em; }
.text .v.last { margin-left: var(--lh); }
.text .ch { font-weight: 900; letter-spacing: .08em; }
.text .ht { font-weight: 600; padding-top: 2em; }
.text .ht.last { margin-left: var(--lh); }
.text .end { padding-top: 6em; color: rgba(34, 24, 15, .75); }

/* table of contents in the book */
.text .toc-head { font-weight: 900; letter-spacing: .3em; margin-left: var(--lh); }
.text .toc-e { cursor: pointer; }
.text .toc-e .n { font-weight: 600; }
.text .toc-e .b { display: block; padding-top: 4em; }
.text .toc-e:hover { color: var(--zhu); }

/* ---------- special pages ---------- */

.kind-endpaper {
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .25), transparent 70%),
        repeating-linear-gradient(45deg, rgba(60, 70, 110, .06) 0 2px, transparent 2px 14px),
        repeating-linear-gradient(-45deg, rgba(60, 70, 110, .06) 0 2px, transparent 2px 14px),
        #e9dfc6;
}

.kind-title { background: #efd9a4; align-items: center; padding-top: 0; }

.title-frame {
    position: relative;
    z-index: 1;
    width: 74%;
    height: 80%;
    border: 3px solid var(--zhu);
    outline: 1px solid var(--zhu);
    outline-offset: 3px;
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: stretch;
    padding: 7% 6%;
}

.title-frame > div:not(.seal) { writing-mode: vertical-rl; white-space: nowrap; }

.title-frame .t-side {
    font-size: calc(var(--ph) * .028);
    letter-spacing: .4em;
    color: var(--ink);
}

.title-frame .t-side.left { align-self: flex-start; }

.title-frame .t-main {
    font-family: var(--brush);
    font-size: calc(var(--ph) * .13);
    line-height: 1;
    color: #1b120b;
    align-self: center;
    letter-spacing: .06em;
    text-shadow: 0 0 1px rgba(0, 0, 0, .35);
}

.seal {
    position: absolute;
    width: calc(var(--ph) * .07);
    height: calc(var(--ph) * .07);
    left: 14%;
    bottom: 12%;
    writing-mode: vertical-rl;
    background: #b5331f;
    color: #f4dcc0;
    font: 900 calc(var(--ph) * .027)/1.08 var(--serif);
    text-align: center;
    padding: calc(var(--ph) * .006);
    border-radius: 3px;
    opacity: .86;
    mix-blend-mode: multiply;
    transform: rotate(-3deg);
    -webkit-mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75) 80%);
    mask: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75) 80%);
}

.kind-colophon { align-items: center; padding-top: 0; }

.colophon {
    position: relative;
    z-index: 1;
    writing-mode: vertical-rl;
    font-size: calc(var(--fs) * 1.5);
    letter-spacing: .6em;
    font-weight: 600;
}

.kind-colophon .seal { left: 30%; bottom: 17%; }

/* 线装 cover: indigo silk, title slip upper left, stitched on the right */
.kind-cover {
    padding: 0;
    background:
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 90% 70% at 40% 35%, #2f4067, #1d2943 60%, #141c30);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, .45);
    border-radius: 2px 0 0 2px;
}

.kind-cover::before { opacity: .5; mix-blend-mode: screen; }
.kind-cover::after { background: radial-gradient(ellipse 80% 80% at 50% 50%, transparent 60%, rgba(0, 0, 0, .35)); }

.tiqian {
    position: absolute;
    z-index: 1;
    top: 7%;
    left: 9%;
    width: 17%;
    height: 54%;
    background: #f1e6cb;
    border: 1px solid rgba(110, 80, 40, .35);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 12px rgba(150, 110, 50, .25);
    padding: 6px;
}

.tiqian-in {
    height: 100%;
    border: 1px solid rgba(34, 24, 15, .55);
    writing-mode: vertical-rl;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--brush);
    font-size: calc(var(--ph) * .078);
    line-height: 1;
    letter-spacing: .04em;
    color: #1b120b;
}

.tiqian-in small {
    font-family: var(--serif);
    font-size: .26em;
    letter-spacing: .3em;
    margin-top: .8em;
    align-self: flex-end;
}

.stitches {
    position: absolute;
    z-index: 1;
    right: 0;
    top: 0;
    width: 12%;
    height: 100%;
}

.baojiao {
    position: absolute;
    z-index: 1;
    right: 0;
    width: 12%;
    height: 7%;
    background: linear-gradient(135deg, #5e5136, #3b3222);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .5);
}

.baojiao.top { top: 0; }
.baojiao.bot { bottom: 0; }

/* ---------- turning leaf ---------- */

.leaf {
    transform-style: preserve-3d;
    z-index: 10;
    will-change: transform;
}

.leaf.from-l { left: 0; transform-origin: 100% 50%; }
.leaf.from-r { left: var(--pw); transform-origin: 0 50%; }

.face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: hidden;
}

.face.back { transform: rotateY(180deg); }

.shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
}

.face .shade { background: linear-gradient(90deg, rgba(40, 24, 8, .0), rgba(40, 24, 8, .35)); }
.from-r .face.front .shade, .from-l .face.back .shade { background: linear-gradient(270deg, rgba(40, 24, 8, .0), rgba(40, 24, 8, .35)); }

.slot > .shade { background: linear-gradient(90deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .3)); z-index: 6; }
.slot-l > .shade { background: linear-gradient(270deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .3)); }

/* ---------- table of contents drawer ---------- */

.drawer {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(10, 6, 3, .55);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(3px);
}

.drawer[hidden] { display: none; }

.drawer-card {
    position: relative;
    width: min(560px, 100%);
    max-height: min(82vh, 760px);
    display: flex;
    flex-direction: column;
    background: var(--paper);
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
    overflow: hidden;
}

.drawer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 12px 22px;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .4em;
    border-bottom: 2px solid var(--zhu);
}

.drawer-head .tool { color: var(--ink); background: transparent; border-color: rgba(34, 24, 15, .25); }

.drawer-list {
    list-style: none;
    margin: 0;
    padding: 6px 0 14px;
    overflow-y: auto;
    user-select: text;
}

.drawer-list li {
    display: flex;
    gap: 14px;
    padding: 9px 22px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.5;
}

.drawer-list li:hover { background: rgba(168, 56, 42, .1); }
.drawer-list li.cur { color: var(--zhu); font-weight: 600; }
.drawer-list .n { flex: 0 0 6.2em; color: var(--zhu); }

/* off-screen copy of a page used to work out where each page breaks */
.measure {
    position: fixed;
    left: -9999px;
    top: 0;
    width: var(--pw);
    height: var(--ph);
    visibility: hidden;
}