/* Digiscroll archive: one vignette at a time on the Axiom Corp. terminal.
   Builds on style.css; only the archive's own pieces live here. */

.screen {
    display: flex;
    flex-direction: column;
}

.title { margin-bottom: .3em; }

.scroll { flex: 1; }

.scroll-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 16px;
    border-bottom: 1px solid var(--rule);
    margin-bottom: .5em;
}

.scroll-title {
    margin: 0;
    font-family: "Jacquard 24", serif;
    font-weight: normal;
    font-size: 1.5em;
    line-height: 1.1;
    color: var(--rubric);
    text-shadow: none;
}

.scroll-posted {
    font-size: .7em;
    letter-spacing: .06em;
    opacity: .85;
}

/* Long-form reading: a smooth printed face instead of the pixel blackletter. */
.scroll-body {
    font-family: "IM Fell English", Georgia, serif;
    font-size: .78em;
    line-height: 1.45;
    max-width: 68ch;
    text-shadow: 0 0 .5px rgba(42, 28, 14, .4);
}

.scroll-body p { margin-bottom: .8em; }

.scroll-body .drop { font-size: 3.4em; margin-top: 6px; }

.scroll-body p:first-child::after { content: ""; display: block; clear: both; }

/* A new scroll blots in from blur to sharp, like the terminal's ink. */
.scroll.inking .scroll-head,
.scroll.inking .scroll-body {
    animation: scroll-ink .5s ease-out;
}

@keyframes scroll-ink {
    from { opacity: 0; filter: blur(2px); }
    to   { opacity: 1; filter: blur(0); }
}

.scroll-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    margin: .8em 0 .6em;
}

.scroll-nav button,
.return {
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 0 var(--ink);
    padding: 2px 12px;
    cursor: pointer;
    border-radius: 0;
    text-decoration: none;
    text-shadow: none;
}

#prev::before { content: "< "; }
#next::after { content: " >"; }

/* Highlighted option is filled in, like the splash page's buttons on hover. */
.scroll-nav .selected {
    color: var(--parch);
    background: var(--ink);
    outline: none;
}

.scroll-nav button:active,
.return:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 0 var(--ink);
}

.scroll-nav button:disabled {
    opacity: .35;
    cursor: default;
    color: var(--ink);
    background: transparent;
    box-shadow: none;
}

.return { margin-left: auto; }

/* Notary's seal: small print along the bottom of the glass. */
.seal {
    border-top: 1px solid var(--rule);
    padding-top: 6px;
    font-size: .62em;
    letter-spacing: .04em;
    opacity: .9;
    overflow-wrap: anywhere;
}

.seal a { color: inherit; }

.seal .digest { font-family: ui-monospace, Consolas, monospace; font-size: .9em; }

.seal.broken { color: var(--rubric); }

@media (max-width: 640px) {
    .return { margin-left: 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .scroll.inking .scroll-head,
    .scroll.inking .scroll-body { animation: none; }
}