/* interplanetary.biz — a notebook for long-distance trade
   palette: #D4A574 #C8763E #5C7A6E #F4EBD9 #F9F4E8 #E8C9A0 #2C2419 #9A4B2A
   typography: Caveat (display/handwritten), Kalam (marginalia), Source Serif 4 (body),
               DM Mono (tabular), Big Shoulders Display (poster scraps) */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --rag-paper: #F4EBD9;
    --paper-highlight: #F9F4E8;
    --honeyed-amber: #E8C9A0;
    --old-gold: #D4A574;
    --terracotta: #C8763E;
    --deep-sienna: #9A4B2A;
    --archive-brown: #2C2419;
    --sage-shadow: #5C7A6E;

    --header-h: 18vh;
    --spine-w: 12vw;
    --tally-top: 64vh;

    --serif: 'Source Serif 4', 'Georgia', serif;
    --hand: 'Caveat', 'Bradley Hand', cursive;
    --pencil: 'Kalam', 'Comic Sans MS', cursive;
    --mono: 'DM Mono', 'IBM Plex Mono', monospace;
    --poster: 'Big Shoulders Display', 'Impact', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--rag-paper);
    background-image:
        radial-gradient(circle at 12% 18%, rgba(154, 75, 42, 0.018) 0, transparent 38%),
        radial-gradient(circle at 88% 62%, rgba(212, 165, 116, 0.025) 0, transparent 42%),
        repeating-linear-gradient(
            -1deg,
            transparent 0,
            transparent 2px,
            rgba(154, 75, 42, 0.012) 2px,
            rgba(154, 75, 42, 0.012) 3px
        ),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.04 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
    background-blend-mode: multiply;
    color: var(--archive-brown);
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.62;
    min-height: 100vh;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.svg-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* ---------- The F-pattern underlay ---------- */
.ledger-f {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}

.ledger-f .f-stroke {
    fill: none;
    stroke: var(--old-gold);
    stroke-width: 0.16;
    stroke-opacity: 0.32;
    stroke-dasharray: 0.5 0.8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dashoffset: 100;
    animation: draw-f 2.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.ledger-f .f-top { animation-delay: 0.05s; stroke-width: 0.22; }
.ledger-f .f-spine { animation-delay: 0.65s; stroke-width: 0.20; }
.ledger-f .f-mid { animation-delay: 1.30s; stroke-width: 0.18; }
.ledger-f .f-tick { animation-delay: 1.95s; stroke-width: 0.14; stroke-dasharray: 0.3 0.5; }

@keyframes draw-f {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* ---------- Header stroke ---------- */
.header-stroke {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100%;
    min-height: var(--header-h);
    background:
        linear-gradient(180deg,
            var(--honeyed-amber) 0%,
            rgba(232, 201, 160, 0.92) 60%,
            rgba(232, 201, 160, 0.62) 100%);
    border-bottom: 1px dashed rgba(154, 75, 42, 0.28);
    backdrop-filter: blur(0.4px);
    padding: 1.0rem 2.4rem 0.6rem 2.4rem;
}

.header-inner {
    display: grid;
    grid-template-columns: 1.4fr 1.2fr 0.9fr;
    gap: 1.2rem;
    align-items: center;
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.header-left {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.header-mark {
    align-self: center;
    flex: 0 0 auto;
}

.manifest-title {
    font-family: var(--hand);
    font-weight: 700;
    color: var(--deep-sienna);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    letter-spacing: -0.5px;
    line-height: 1;
    transform: skewX(-1.5deg);
    text-shadow: 0.5px 0.5px 0px rgba(154, 75, 42, 0.06);
}

.title-dot {
    color: var(--terracotta);
    margin: 0 0.05em;
}

.manifest-subtitle {
    font-family: var(--pencil);
    font-weight: 300;
    font-size: 0.96rem;
    color: rgba(74, 56, 41, 0.72);
    line-height: 1.1;
    margin-top: 0.15rem;
    flex: 1 1 100%;
}

.header-route {
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--archive-brown);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.route-piece {
    padding: 0.2rem 0.5rem;
    border-bottom: 1px solid rgba(154, 75, 42, 0.45);
}

.route-arrow {
    color: var(--terracotta);
    font-family: var(--hand);
    font-size: 1.4rem;
}

.header-right {
    text-align: right;
    font-family: var(--pencil);
    color: rgba(74, 56, 41, 0.78);
}

.header-stamp {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    color: var(--terracotta);
    text-transform: uppercase;
    border: 1px solid rgba(200, 118, 62, 0.6);
    padding: 0.18rem 0.45rem;
    display: inline-block;
    transform: rotate(-1.5deg);
    margin-bottom: 0.3rem;
}

.header-date {
    font-family: var(--hand);
    font-size: 1.2rem;
    color: var(--deep-sienna);
    line-height: 1;
}

.header-tide {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dotted rgba(154, 75, 42, 0.28);
    font-family: var(--pencil);
    color: rgba(74, 56, 41, 0.78);
    align-items: baseline;
    justify-content: center;
    max-width: 1480px;
    margin-left: auto;
    margin-right: auto;
}

.tide-label {
    font-family: var(--hand);
    color: var(--terracotta);
    font-weight: 600;
    font-size: 1.06rem;
    margin-right: 0.4rem;
}

.tide-entry {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
    font-size: 0.88rem;
}

.tide-name {
    font-family: var(--pencil);
    color: var(--archive-brown);
}

.tide-num {
    font-family: var(--mono);
    color: var(--deep-sienna);
    font-size: 0.78rem;
}

/* ---------- Spine gutter (vertical) ---------- */
.spine-gutter {
    position: fixed;
    top: var(--header-h);
    left: 0;
    width: var(--spine-w);
    height: calc(100vh - var(--header-h));
    z-index: 10;
    padding: 2rem 0.6rem 1.4rem 1.6rem;
    border-right: 1px dashed rgba(154, 75, 42, 0.22);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: none;
}

.spine-list {
    list-style: none;
    display: flex;
    flex-direction: column-reverse; /* ascending from bottom */
    gap: 1.5rem;
    pointer-events: auto;
}

.spine-item a {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    color: rgba(154, 75, 42, 0.32);
    text-decoration: none;
    font-family: var(--hand);
    transition: color 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
                opacity 480ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.spine-num {
    font-family: var(--hand);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    letter-spacing: -1px;
    transform: skewX(-2deg);
    display: inline-block;
}

.spine-dot {
    font-size: 1.4rem;
    color: var(--terracotta);
    opacity: 0.5;
    line-height: 1;
}

.spine-cap {
    font-family: var(--pencil);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    line-height: 1.05;
    max-width: 6.5rem;
    color: rgba(74, 56, 41, 0.4);
}

.spine-item.is-active a {
    color: var(--deep-sienna);
}
.spine-item.is-active .spine-cap {
    color: rgba(74, 56, 41, 0.85);
}
.spine-item.is-active .spine-dot {
    opacity: 1;
}
.spine-item.is-passed a {
    opacity: 0.32;
}

.spine-foot {
    display: flex;
    justify-content: center;
    padding-bottom: 0.6rem;
    opacity: 0.55;
}

/* ---------- Tally stroke (sticky lower band) ---------- */
.tally-stroke {
    position: sticky;
    top: var(--tally-top);
    z-index: 15;
    margin: 0 0 -7vh calc(var(--spine-w));
    width: calc(100% - var(--spine-w));
    background:
        linear-gradient(180deg,
            rgba(232, 201, 160, 0.92) 0%,
            rgba(232, 201, 160, 0.78) 100%);
    border-top: 1px dashed rgba(154, 75, 42, 0.34);
    border-bottom: 1px dashed rgba(154, 75, 42, 0.18);
    padding: 0.4rem 1.2rem;
    backdrop-filter: blur(0.4px);
}

.tally-inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.4rem;
    max-width: 1280px;
    margin: 0 auto;
    align-items: baseline;
}

.tally-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}

.tally-label {
    font-family: var(--pencil);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: rgba(74, 56, 41, 0.62);
    text-transform: lowercase;
}

.tally-value {
    font-family: var(--hand);
    font-weight: 600;
    font-size: clamp(1.15rem, 1.8vw, 1.55rem);
    color: var(--deep-sienna);
    transform: skewX(-1.2deg);
    transition: opacity 200ms ease;
}

.tally-value.is-fading {
    opacity: 0.0;
}

.tally-cell--cycle .tally-value {
    font-family: var(--mono);
    font-size: 1.1rem;
    transform: none;
    color: var(--terracotta);
    letter-spacing: 0.1em;
}

/* ---------- Open field (main scroll) ---------- */
.open-field {
    position: relative;
    z-index: 5;
    margin-left: var(--spine-w);
    padding: 4rem clamp(1.4rem, 4vw, 4rem) 6rem clamp(1.4rem, 4vw, 4rem);
    max-width: 1180px;
}

.entry {
    position: relative;
    padding: 4rem 0 6rem 0;
    min-height: 60vh;
}

.entry-marker {
    position: absolute;
    top: 1.4rem;
    left: -8.4vw;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 18vw;
}

.entry-num {
    font-family: var(--hand);
    font-weight: 700;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    color: var(--deep-sienna);
    transform: skewX(-2deg);
    line-height: 1;
    letter-spacing: -2px;
}

.entry-rule {
    width: 240px;
    height: 6px;
    flex: 0 0 auto;
}

.entry-rule .rule-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.entry.is-visible .entry-rule .rule-path {
    stroke-dashoffset: 0;
}

.entry-title {
    font-family: var(--hand);
    font-weight: 600;
    font-size: clamp(2.4rem, 5vw, 4.6rem);
    line-height: 1.05;
    letter-spacing: -0.5px;
    color: var(--deep-sienna);
    transform: skewX(-1.5deg);
    text-shadow: 0.5px 0.5px 0px rgba(154, 75, 42, 0.06);
    text-transform: lowercase;
    margin: 0.6rem 0 1.4rem 0;
    max-width: 26ch;
}

.entry-body {
    max-width: 58ch;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 18;
}

.entry-body--long {
    max-width: 60ch;
}

.entry-body p {
    margin-bottom: 1.1rem;
    color: var(--archive-brown);
}

.body-paragraph {
    position: relative;
}

.drop-cap {
    float: left;
    font-family: var(--serif);
    font-variation-settings: 'opsz' 60;
    font-size: 4.6rem;
    line-height: 0.92;
    color: var(--deep-sienna);
    margin: 0.05em 0.3rem 0 0;
    padding-top: 0.2rem;
    font-weight: 400;
    shape-outside: circle(50% at 50% 60%);
    shape-margin: 0.4rem;
}

.celestial {
    position: relative;
    color: var(--archive-brown);
    background-image: linear-gradient(transparent 86%, rgba(154, 75, 42, 0.55) 86%, rgba(154, 75, 42, 0.55) 92%, transparent 92%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    background-position: 0 0;
    transition: background-size 800ms cubic-bezier(0.22, 0.61, 0.36, 1);
    padding: 0 0.04em 0.05em 0.04em;
}

.entry.is-visible .celestial {
    background-size: 100% 100%;
}

.marginalia {
    font-family: var(--pencil);
    font-weight: 300;
    color: rgba(74, 56, 41, 0.72);
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0.6rem 0 1.4rem 0;
    padding-left: 1.4rem;
    border-left: 1px solid rgba(212, 165, 116, 0.55);
    transform: rotate(-0.4deg);
    max-width: 32ch;
}

.marginalia--right {
    margin-left: auto;
    margin-right: 0;
    border-left: none;
    border-right: 1px solid rgba(212, 165, 116, 0.55);
    padding-left: 0;
    padding-right: 1.4rem;
    text-align: right;
    transform: rotate(0.6deg);
}

em {
    font-style: italic;
    color: var(--deep-sienna);
}

/* ---------- Wax seal ---------- */
.seal {
    position: absolute;
    top: 1.4rem;
    right: 0;
    width: 110px;
    height: 110px;
    transform: rotate(-8deg);
    opacity: 0.92;
    filter: url(#paper-tear);
}

.seal svg {
    width: 100%;
    height: 100%;
}

.seal-ring {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s;
}

.entry.is-visible .seal-ring {
    stroke-dashoffset: 0;
}

.seal-text {
    font-family: var(--mono);
    font-size: 7px;
    fill: var(--terracotta);
    letter-spacing: 0.18em;
}

/* ---------- Bust frames ---------- */
.bust-mount {
    position: relative;
    margin-top: 2rem;
}

.bust-mount--right {
    float: right;
    width: 240px;
    margin-left: 1.6rem;
    margin-bottom: 1.2rem;
    transform: rotate(0.8deg);
}

.bust-mount--left {
    float: left;
    width: 240px;
    margin-right: 1.6rem;
    margin-bottom: 1.2rem;
    transform: rotate(-0.6deg);
}

.bust-frame {
    position: relative;
    filter: drop-shadow(2px 6px 24px rgba(92, 122, 110, 0.22));
    will-change: transform;
}

.bust-frame--small {
    width: 160px;
}

.bust-illu {
    width: 100%;
    height: auto;
    display: block;
}

.bust-caption {
    font-family: var(--pencil);
    font-weight: 300;
    font-size: 0.78rem;
    color: rgba(74, 56, 41, 0.72);
    text-align: center;
    margin-top: 0.5rem;
    line-height: 1.3;
    transform: rotate(-0.4deg);
}

.bust-row {
    display: flex;
    gap: 2rem;
    margin: 2.4rem 0 1.4rem 0;
    flex-wrap: wrap;
    justify-content: flex-start;
    transform: rotate(-0.2deg);
}

.bust-row .bust-frame--small:nth-child(2) {
    transform: rotate(1.2deg);
    margin-top: 1rem;
}

/* ---------- Orbital diagram ---------- */
.entry--diagram .diagram-figure {
    margin: 2.6rem 0 2rem 0;
    padding: 1rem 0;
    width: 100%;
    max-width: 720px;
}

.orbital-diagram {
    width: 100%;
    height: auto;
    display: block;
    background:
        repeating-linear-gradient(
            -2deg,
            transparent 0,
            transparent 30px,
            rgba(154, 75, 42, 0.04) 30px,
            rgba(154, 75, 42, 0.04) 31px
        );
    padding: 0.6rem;
}

.orbit, .orbit-intercept, .orbit-arrow {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.orbit--transfer { transition-duration: 1.8s; transition-delay: 0.0s; }
.orbit--inner    { transition-duration: 1.4s; transition-delay: 0.4s; }
.orbit--outer    { transition-duration: 1.2s; transition-delay: 0.6s; }
.orbit-intercept { transition-duration: 1.0s; transition-delay: 1.0s; }
.orbit-arrow     { transition-duration: 0.6s; transition-delay: 1.2s; }

.entry.is-visible .orbit,
.entry.is-visible .orbit-intercept,
.entry.is-visible .orbit-arrow {
    stroke-dashoffset: 0;
}

.orbit-body {
    opacity: 0;
    transition: opacity 0.4s ease 1.4s;
}
.entry.is-visible .orbit-body {
    opacity: 1;
}

.orbit-sun {
    opacity: 0;
    transition: opacity 0.4s ease 0.4s;
}
.entry.is-visible .orbit-sun {
    opacity: 1;
}

.orbit-label, .orbit-note {
    font-family: var(--pencil);
    font-size: 11px;
    fill: var(--archive-brown);
    opacity: 0;
    transition: opacity 0.6s ease 1.6s;
}
.entry.is-visible .orbit-label,
.entry.is-visible .orbit-note {
    opacity: 0.85;
}

.orbit-note {
    font-family: var(--hand);
    font-size: 16px;
    fill: var(--deep-sienna);
}

.orbit-note--small {
    font-family: var(--pencil);
    font-size: 11px;
    fill: rgba(74, 56, 41, 0.7);
}

.orbit-label--center {
    font-size: 9px;
    fill: var(--terracotta);
}

.diagram-caption {
    font-family: var(--pencil);
    font-size: 0.84rem;
    color: rgba(74, 56, 41, 0.72);
    margin-top: 0.6rem;
    text-align: center;
    transform: rotate(-0.4deg);
}

/* ---------- Manifest table ---------- */
.manifest-table {
    margin: 2rem 0 2rem 0;
    background: var(--paper-highlight);
    border: 1px solid rgba(154, 75, 42, 0.18);
    box-shadow: 0 8px 32px rgba(92, 122, 110, 0.08);
    padding: 0.6rem 0;
    transform: rotate(-0.15deg);
    max-width: 720px;
}

.manifest-row {
    display: grid;
    grid-template-columns: 60px 1.8fr 2.4fr 0.8fr 50px;
    gap: 0.8rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px dotted rgba(154, 75, 42, 0.22);
    align-items: baseline;
    transition: background 240ms ease;
}

.manifest-row:last-child {
    border-bottom: none;
}

.manifest-row--head {
    border-bottom: 1px solid var(--terracotta);
    padding-bottom: 0.45rem;
    margin-bottom: 0.4rem;
}

.manifest-row--head .m-cell {
    font-family: var(--hand);
    font-weight: 600;
    color: var(--terracotta);
    font-size: 1.0rem;
    text-transform: lowercase;
    letter-spacing: 0;
}

.m-cell {
    font-family: var(--serif);
    font-size: 0.94rem;
    color: var(--archive-brown);
}

.m-cell--ref {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--deep-sienna);
    letter-spacing: 0.04em;
}

.m-cell--weight {
    font-family: var(--mono);
    font-size: 0.82rem;
    color: var(--deep-sienna);
    text-align: right;
}

.m-cell--mark {
    text-align: center;
}

.m-cell--mark svg {
    opacity: 0;
    transition: opacity 280ms ease;
}

.entry.is-visible .m-cell--mark svg {
    opacity: 1;
}

.entry.is-visible .m-cell--mark svg path {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation: draw-check 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes draw-check {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

.manifest-row[data-tick="1"]:hover {
    background: rgba(212, 165, 116, 0.12);
    cursor: default;
}
.manifest-row[data-tick="1"]:hover .m-cell--cargo::after {
    content: "";
    display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--deep-sienna), transparent);
    margin-top: 2px;
    animation: hover-underline 280ms ease forwards;
}

@keyframes hover-underline {
    from { transform: scaleX(0); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

.manifest-row--pending {
    opacity: 0.65;
    font-style: italic;
}

.pending-dot {
    color: rgba(154, 75, 42, 0.5);
    font-family: var(--mono);
    font-size: 1.4rem;
    line-height: 0;
}

/* ---------- Poster scraps ---------- */
.poster-stage {
    position: relative;
    margin: 2.4rem 0 2.4rem 0;
    padding: 3.2rem 1rem 4rem 1rem;
    min-height: 380px;
    background:
        repeating-linear-gradient(
            93deg,
            transparent 0,
            transparent 28px,
            rgba(212, 165, 116, 0.06) 28px,
            rgba(212, 165, 116, 0.06) 29px
        );
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 2.4rem;
}

.poster {
    position: relative;
    background: var(--paper-highlight);
    padding: 2.2rem 1.6rem 1.4rem 1.6rem;
    width: 280px;
    transform: rotate(var(--rot, 0deg));
    box-shadow:
        0 4px 18px rgba(92, 122, 110, 0.18),
        inset 0 0 0 1px rgba(154, 75, 42, 0.18);
    text-align: center;
    color: var(--deep-sienna);
    filter: url(#paper-tear);
    transition: transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.poster::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(200, 118, 62, 0.5);
    pointer-events: none;
}

.poster::after {
    content: "";
    position: absolute;
    bottom: -8px;
    right: -10px;
    width: 60px;
    height: 30px;
    background: var(--rag-paper);
    transform: rotate(-32deg);
    opacity: 0.75;
}

.thumbtack {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--terracotta), var(--deep-sienna) 70%, var(--archive-brown));
    box-shadow: 0 2px 4px rgba(44, 36, 25, 0.4);
}

.poster-line {
    font-family: var(--poster);
    font-weight: 700;
    color: var(--terracotta);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.poster-line--top {
    font-size: 1.05rem;
    color: var(--deep-sienna);
    margin-bottom: 0.5rem;
    letter-spacing: 0.18em;
}

.poster-line--mid {
    font-size: 1.4rem;
    margin: 0.4rem 0;
    color: var(--archive-brown);
    letter-spacing: 0.2em;
}

.poster-line--big {
    font-size: 2.4rem;
    color: var(--terracotta);
    margin: 0.4rem 0;
    letter-spacing: 0.04em;
    line-height: 1;
}

.poster-line--small {
    font-family: var(--pencil);
    font-weight: 400;
    color: rgba(74, 56, 41, 0.78);
    font-size: 0.82rem;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.6rem;
    line-height: 1.2;
}

.poster--ice {
    background: linear-gradient(160deg, var(--paper-highlight) 0%, rgba(232, 201, 160, 0.4) 100%);
}
.poster--traverse {
    background: linear-gradient(180deg, var(--rag-paper) 0%, rgba(212, 165, 116, 0.22) 100%);
}
.poster--wheat {
    background: linear-gradient(170deg, var(--paper-highlight) 0%, rgba(212, 165, 116, 0.18) 100%);
}

/* ---------- Signature block ---------- */
.signature-block {
    margin: 2.6rem 0 0 auto;
    max-width: 360px;
    text-align: right;
    position: relative;
    padding-right: 2rem;
}

.signed {
    font-family: var(--hand);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--deep-sienna);
    transform: skewX(-2deg);
    line-height: 1;
}

.inkblot-svg {
    margin-top: 0.5rem;
    opacity: 0.85;
    transform: rotate(8deg);
    margin-right: -0.6rem;
}

/* ---------- Footer ---------- */
.page-foot {
    position: relative;
    z-index: 5;
    margin-left: var(--spine-w);
    padding: 3rem clamp(1.4rem, 4vw, 4rem) 4rem clamp(1.4rem, 4vw, 4rem);
    border-top: 1px dashed rgba(154, 75, 42, 0.32);
    background: linear-gradient(180deg, transparent 0%, rgba(232, 201, 160, 0.32) 100%);
}

.foot-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    max-width: 720px;
}

.foot-line {
    font-family: var(--hand);
    font-weight: 500;
    color: var(--deep-sienna);
    font-size: 1.15rem;
    line-height: 1.4;
}

.foot-line--small {
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.92rem;
    color: rgba(74, 56, 41, 0.78);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .entry-rule .rule-path,
    .seal-ring,
    .orbit, .orbit-intercept, .orbit-arrow {
        stroke-dashoffset: 0 !important;
    }
    .ledger-f .f-stroke {
        stroke-dashoffset: 0 !important;
    }
    .celestial {
        background-size: 100% 100% !important;
    }
}

/* ---------- Mobile reflow ---------- */
@media (max-width: 880px) {
    :root {
        --header-h: auto;
        --spine-w: 0;
        --tally-top: 56vh;
    }

    .header-stroke {
        padding: 0.7rem 1rem;
        min-height: auto;
    }

    .header-inner {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .header-route {
        justify-content: flex-start;
    }

    .header-right {
        text-align: left;
    }

    .header-tide {
        gap: 0.8rem;
        font-size: 0.8rem;
    }

    .spine-gutter {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 1rem;
        border-right: none;
        border-bottom: 1px dashed rgba(154, 75, 42, 0.22);
        overflow-x: auto;
    }

    .spine-list {
        flex-direction: row;
        gap: 1rem;
        flex-wrap: nowrap;
    }

    .spine-cap {
        max-width: none;
        white-space: nowrap;
    }

    .spine-foot { display: none; }

    .open-field, .page-foot {
        margin-left: 0;
        padding: 2rem 1.2rem 4rem 1.2rem;
    }

    .entry {
        padding: 2rem 0 3rem 0;
    }

    .entry-marker {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin-bottom: 0.6rem;
    }

    .entry-num {
        font-size: 2.4rem;
    }

    .entry-rule {
        width: 160px;
    }

    .seal {
        position: relative;
        top: auto;
        right: auto;
        margin: 1rem 0;
        width: 80px;
        height: 80px;
    }

    .bust-mount--right,
    .bust-mount--left {
        float: none;
        width: 60%;
        margin: 1.6rem auto;
    }

    .tally-stroke {
        margin-left: 0;
        width: 100%;
        position: sticky;
        top: 0;
    }

    .tally-inner {
        grid-template-columns: 1fr 1fr;
        gap: 0.6rem;
    }

    .ledger-f {
        opacity: 0.5;
    }

    .manifest-row {
        grid-template-columns: 50px 1fr 30px;
    }
    .manifest-row .m-cell--cargo,
    .manifest-row .m-cell--weight {
        grid-column: 2 / 3;
    }

    .manifest-row .m-cell--ship {
        font-weight: 600;
    }

    .poster-stage {
        gap: 1.4rem;
    }
    .poster {
        width: 90%;
    }

    .entry-title {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}

/* ---------- Clearfix on entries with floated busts ---------- */
.entry::after {
    content: "";
    display: table;
    clear: both;
}