.elementor-180457 .elementor-element.elementor-element-245f5ef:not(.elementor-motion-effects-element-type-background), .elementor-180457 .elementor-element.elementor-element-245f5ef > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#323232;}.elementor-180457 .elementor-element.elementor-element-245f5ef{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0% 0% 0% 0%;}.elementor-180457 .elementor-element.elementor-element-245f5ef > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-180457 .elementor-element.elementor-element-be0b74f > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){margin-block-end:10px;}.elementor-180457 .elementor-element.elementor-element-be0b74f > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 0px 0px;}.elementor-180457 .elementor-element.elementor-element-be0b74f > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-180457 .elementor-element.elementor-element-fed8bc7 > .elementor-widget-container{margin:0px 0px 0px 0px;padding:0rem 0rem 0rem 0rem;}body.elementor-page-180457:not(.elementor-motion-effects-element-type-background), body.elementor-page-180457 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wfh.org/wp-content/uploads/2022/01/dark_drop.svg");background-position:0% 20em;background-repeat:no-repeat;background-size:33% auto;}@media(max-width:1024px) and (min-width:768px){.elementor-180457 .elementor-element.elementor-element-be0b74f{width:100%;}}@media(max-width:1024px){.elementor-180457 .elementor-element.elementor-element-245f5ef{padding:0% 0% 0% 0%;}body.elementor-page-180457:not(.elementor-motion-effects-element-type-background), body.elementor-page-180457 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:100% 20em;background-size:60% auto;}}@media(max-width:767px){.elementor-180457 .elementor-element.elementor-element-245f5ef{padding:0% 0% 0% 0%;z-index:0;}body.elementor-page-180457:not(.elementor-motion-effects-element-type-background), body.elementor-page-180457 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://wfh.org/wp-content/uploads/2022/01/dark_drop.svg");background-position:100% 20em;background-size:75% auto;}}/* Start custom CSS for html, class: .elementor-element-fed8bc7 *//* page itself never scrolls — only the viewer pane does */
html, body {
    height: 100%;
    overflow: hidden; 
}

.elementor-180457 .elementor-element.elementor-element-fed8bc7 p {
    font-family: 'Avenir Book', arial;
    font-size: 13px;
    text-align: center;
    margin:0;
    color: #000000; 
    line-height: 1.5;
}

/* ── Top bar ────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ink);
    color: #f2f4f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    height: 60px;
    gap: 1rem;
}
.topbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ── Sidebar ────────────────────────────── */
.sidebar {
    border-right: 1px solid var(--rule);
    padding: 1.5rem 0;
    position: sticky;
    top: 60px;
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sidebar-section {
    padding: 0 2.5rem 1.5rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.5rem;
}
.sidebar-label {
    font-family: 'avenir heavy', arial, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #99a;
    margin-bottom: 0.75rem;
}
 

/* Nav buttons */
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .nav-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .nav-btn {
    background: none;
    border: 1px solid #f3f4f5;
    border-radius: 3px;
    color: #f2f4f5;
    font-family: 'avenir book', arial, sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.06em;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .nav-btn:hover { 
    background: #f2f4f5;
    border-color: #f2f4f5;
    color: black;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .nav-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Jump to page */
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .jump-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .jump-input {
    width: 60px;
    background: var(--paper-2);
    border: none;
    border-radius: 3px;
    color: black;
    font-family: Monaco, Menlo, monospace;
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    outline: none;
    text-align: center;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .jump-input:focus { 
    border-color: var(--accent);
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .jump-go {
    background: #99a;
    border: none;
    border-radius: 3px;
    color: black;
    font-family: 'avenir heavy', arial, sans-serif;
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: all 0.15s;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .jump-go:hover { 
    background: #b8b8cc;
}

/* Scale */
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .scale-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .scale-row input[type=range] {
      flex: 1;
      accent-color: #ed174c;
    }
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .scale-val {
    font-family: Monaco, Menlo, monospace;
    font-size: 0.8rem;
    min-width: 40px;
    color: #f2f4f5;
}

/* Notice */
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .notice {
    font-size: 0.9rem;
    color: #99a;
    line-height: 1.4;
    border-top: 1px solid var(--rule);
    font-family: 'avenir book', arial, sans-serif;
    flex: 1;
    min-width: 200px; /* Triggers the layout wrap smoothly */
    margin-top: 1rem;  /* Fallback buffer space when stacked */
}
.elementor-180457 .elementor-element.elementor-element-fed8bc7 .notice strong { 
    color: #ed174c;
    font-weight: 600;
}

.sidebar-row {
    padding: 2rem 2.5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Allows wrapping if content runs out of room */
    gap: 1.5rem
}

#thumbnail {
    width: 100%;
    max-width: 150px;
    height: auto;
    align-self: flex-start; /* Prevents canvas from stretching/skewing */
}

/* ── Reset ──────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
:root {
    --ink:        #1a1814;
    --ink-2:      #4a4740;
    --ink-3:      #8a8680;
    --paper-2:    #dAdAe0;
    --paper-3:    #e0dbd2;
    --rule:       rgba(26,24,20,0.1);
    --accent:     #8b2e0f;      /* deep rust — serious, academic */
    --accent-dim: rgba(139,46,15,0.08);
    --shadow:     0 2px 16px rgba(26,24,20,0.10);
}

.journal-mark {
    font-family: Monaco, Menlo, monospace;
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--paper-3);
    white-space: nowrap;
}
 
.page-indicator {
    font-family: Monaco, Menlo, monospace;
    font-size: 1rem;
    color: #f2f4f5;
    letter-spacing: 0.06em;
    min-width: 80px;
    text-align: right;
}
 
/* ── Layout ─────────────────────────────── */
.layout {
    display: grid;
    grid-template-columns: 33% 1fr;
    height: calc(100vh - 60px); /* exact remaining height after topbar */
    overflow: hidden;
}
 
/* ── Main viewer ─────────────────────────── */
main {
    background: var(--paper-2);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    height: 100%;      /* fill the layout row exactly */
    overflow-y: auto;  /* manuscript scrolls inside here */
    overflow-x: hidden;
}
 
/* empty state */
.empty-state {
    margin: auto;
    text-align: center;
    color: var(--ink-3);
}
.empty-state h2 {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}
.empty-state p {
    font-size: 0.9rem;
}
 
/* page wrapper */
.page-wrap {
    position: relative;
    background: #fff;
    box-shadow: var(--shadow);
    display: none; /* shown once loaded */
    /* never wider than the available main column */
    max-width: 100%;
}
 
/* canvas itself */
#pdf-canvas {
    min-width: 325px;    
    display: block;
    /* scale down visually if canvas exceeds container — preserves resolution */
    max-width: 100%;
    height: auto;
    /* security: prevent native right-click save */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
 
/* invisible overlay blocks right-click / drag on canvas */
.canvas-shield {
    position: absolute;
    inset: 0;
    z-index: 10;
    cursor: default;
}
 
/* watermark overlay (CSS layer, semi-transparent) */
.wm-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-30deg);
    opacity: 0;
    transition: opacity 0.3s;
}
.wm-overlay.visible { opacity: 1; }
.wm-overlay span {
    font-family: Monaco, Menlo, monospace;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    color: rgba(139,46,15,0.13);
    white-space: nowrap;
    text-transform: uppercase;
    user-select: none;
}
 
/* page number footer under canvas */
.page-footer {
    font-family: Monaco, Menlo, monospace;
    font-size: 0.7rem;
    color: var(--ink-3);
    letter-spacing: 0.1em;
    padding: 0.6rem 0 0;
    text-align: center;
    display: none;
}
 
/* loading spinner */
.spinner {
    display: none;
    width: 32px;
    height: 32px;
    border: 2px solid var(--paper-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 4rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
 
/* error */
.error-msg {
    display: none;
    color: var(--accent);
    font-family: Monaco, Menlo, monospace;
    font-size: 0.8rem;
    text-align: center;
    padding: 1rem;
}
 
/* ── Print/copy blocking ─────────────────── */
@media print {
    body * { visibility: hidden !important; }
    body::after {
        visibility: visible !important;
        content: "This manuscript is under review and may not be printed or reproduced.";
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.4rem;
        color: #333;
    }
}
 
/* ── Responsive ──────────────────────────── */
@media (max-width: 764px) {
    .layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        height: calc(100vh - 60px);
    }
    .sidebar {
        position: static;
        height: auto;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--rule);
    }
    main {
        height: 100%;
        padding: 1.5rem 1rem;
    }
      
    .sidebar-row {
       /* flex-direction: column-reverse;  Forces vertical stacking */
    }

    #thumbnail {
        padding-left: 0; /* Removes desktop side padding on small screens */
        margin-bottom: 1rem; /* Creates clean gap above the notice text */
    }

    .notice {
        margin-top: 0;          /* Removes desktop margin since thumbnail handle it */
    }
}/* End custom CSS */