/*
 * The Monthly Review - flipbook reader
 *
 * Loaded after css/style.css, so everything here builds on the site's own
 * custom properties (--primary, --accent, --border...). No colour is restated
 * as a literal unless it genuinely has no token: a rebrand should only have to
 * touch style.css.
 */

/* ==========================================================================
   StPageFlip base styles
   Vendored from page-flip 2.0.7 (MIT, https://github.com/Nodlik/StPageFlip).
   The npm package ships this as TypeScript source only - there is no built
   CSS file to link - so it lives here rather than as a seventh HTTP request.
   ========================================================================== */

.stf__parent {
    position: relative;
    display: block;
    box-sizing: border-box;
    transform: translateZ(0);
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.stf__parent canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.stf__block {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    perspective: 2000px;
}

.stf__item {
    display: none;
    position: absolute;
    transform-style: preserve-3d;
}

.stf__outerShadow,
.stf__innerShadow,
.stf__hardShadow,
.stf__hardInnerShadow {
    position: absolute;
    left: 0;
    top: 0;
}

/* ==========================================================================
   Reading stage
   ========================================================================== */

/*
 * A dark stage rather than the usual white section. Two reasons: a magazine
 * page is almost entirely white, so it needs a dark surround to read as a
 * physical object rather than as more page background; and the drop shadow
 * that sells the "book" illusion is invisible on --light-bg.
 */
.tmr-stage {
    background: linear-gradient(180deg, var(--primary-dark) 0%, #0C2417 100%);
    padding: 2.5rem 0 1.75rem;
}

.tmr-stage__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/*
 * Full screen.
 *
 * The browser pins the stage to the whole screen, which is taller than the
 * content, so without this the magazine sits against the top edge with a bank
 * of empty green underneath. Centre it, and allow a scroll for the case where
 * the toolbar and share row still do not fit on a short laptop screen.
 *
 * The UA paints its own background behind a fullscreen element, so the
 * gradient has to be restated here or the stage turns black.
 *
 * Written as two rules rather than one selector list: a browser that does not
 * recognise one of these pseudo-classes discards the whole rule it sits in.
 */
.tmr-stage:fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    background: linear-gradient(180deg, var(--primary-dark) 0%, #0C2417 100%);
}

.tmr-stage:-webkit-full-screen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;
    background: linear-gradient(180deg, var(--primary-dark) 0%, #0C2417 100%);
}

.tmr-issue-title {
    color: var(--white);
    text-align: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.5rem;
    line-height: 1.3;
    margin: 0 0 0.25rem;
}

.tmr-issue-meta {
    color: var(--accent-on-dark);
    text-align: center;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

/*
 * The book sits in a flex row with a nudge arrow on either side. On a phone
 * the arrows move under the book (see the media query at the bottom) because
 * 40px of arrow either side would halve the usable page width.
 */
.tmr-shelf {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

/*
 * --tmr-book-max is set by fitBook() in tmr-flipbook.js from the window
 * height and the real page ratio, so the book plus its toolbar fit on screen
 * without scrolling. The literal is the fallback for the moment before the
 * first PDF page has been measured.
 */
.tmr-book-wrap {
    flex: 1 1 auto;
    min-width: 0;              /* lets the book shrink inside the flex row */
    max-width: min(1000px, var(--tmr-book-max, 1000px));
    position: relative;
}

.tmr-book {
    margin: 0 auto;
}

/* ==========================================================================
   Pages
   ========================================================================== */

.tmr-page {
    background: var(--white);
    overflow: hidden;
    box-sizing: border-box;
}

/*
 * Overrides the vendor's `.stf__parent canvas` rule above, which absolutely
 * positions *every* canvas inside the flipbook. That rule exists for the
 * library's own canvas render mode; here the canvases are the rendered PDF
 * pages and must lay out normally, or they collapse to the parent's size and
 * stretch out of aspect.
 */
.tmr-page canvas.tmr-page__canvas {
    position: static;
    display: block;
    width: 100%;
    height: auto;
}

/* Gutter shading, so a two-page spread creases in the middle like paper. */
.tmr-page--left {
    box-shadow: inset -14px 0 22px -18px rgba(0, 0, 0, 0.55);
}

.tmr-page--right {
    box-shadow: inset 14px 0 22px -18px rgba(0, 0, 0, 0.55);
}

.tmr-page--cover {
    box-shadow: none;
}

/* Shown until the PDF page has been rasterised. */
.tmr-page__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: var(--text-light);
    background: var(--white);
    background-image: linear-gradient(100deg, transparent 20%, rgba(18, 54, 34, 0.05) 45%, transparent 70%);
    background-size: 220% 100%;
    animation: tmr-shimmer 1.4s linear infinite;
}

@keyframes tmr-shimmer {
    from { background-position: 180% 0; }
    to   { background-position: -80% 0; }
}

.tmr-page__canvas { position: relative; z-index: 1; }

/* ==========================================================================
   Controls
   ========================================================================== */

.tmr-nudge {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.tmr-nudge:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.tmr-nudge:disabled {
    opacity: 0.3;
    cursor: default;
}

.tmr-nudge svg { width: 22px; height: 22px; }

.tmr-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.tmr-tool {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.tmr-tool:hover,
.tmr-tool:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}

.tmr-tool svg { width: 17px; height: 17px; flex: 0 0 auto; }

/*
 * Icon-only variant, used for the sound toggle. Deliberately not marked
 * --optional: being unable to mute a page on a phone is worse than a slightly
 * busier toolbar.
 */
.tmr-tool--icon {
    padding: 0.5rem;
    width: 36px;
    justify-content: center;
}

.tmr-tool--icon svg { width: 19px; height: 19px; }

.tmr-tool--icon[aria-pressed="false"] { opacity: 0.65; }

.tmr-counter {
    color: var(--white);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.25);
    min-width: 108px;
    text-align: center;
}

/* Keyboard focus has to stay visible against the dark stage. */
.tmr-stage :focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

/* ==========================================================================
   Status + fallback
   ========================================================================== */

.tmr-status {
    color: var(--white);
    text-align: center;
    padding: 3rem 1rem;
    font-size: 0.95rem;
}

.tmr-status__spinner {
    width: 34px;
    height: 34px;
    margin: 0 auto 1rem;
    border: 3px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: tmr-spin 0.9s linear infinite;
}

@keyframes tmr-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .tmr-status__spinner { animation-duration: 2.4s; }
    .tmr-page__placeholder { animation: none; }
}

.tmr-status a {
    color: var(--accent-on-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Share row
   ========================================================================== */

.tmr-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.tmr-share__label {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 0.25rem;
}

.tmr-share__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.tmr-share__btn:hover { transform: translateY(-2px); }
.tmr-share__btn--whatsapp:hover { background: var(--whatsapp); border-color: var(--whatsapp); }
.tmr-share__btn--facebook:hover { background: #1877F2; border-color: #1877F2; }
.tmr-share__btn--x:hover { background: #000; border-color: #000; }
.tmr-share__btn--mail:hover,
.tmr-share__btn--copy:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.tmr-share__btn svg { width: 19px; height: 19px; }

/*
 * "Link copied" feedback. Announced politely rather than assertively: it
 * confirms something the reader just did, so it should not interrupt them.
 */
.tmr-share__toast {
    flex-basis: 100%;
    text-align: center;
    color: var(--accent-on-dark);
    font-size: 0.8rem;
    min-height: 1.2em;
}

/* ==========================================================================
   Zoom overlay
   Deliberately a separate layer rather than a transform on the flipbook:
   scaling the book breaks StPageFlip's pointer maths, and a reader who is
   zoomed in wants to pan a still page, not flip one.
   ========================================================================== */

.tmr-zoom {
    position: fixed;
    inset: 0;
    /*
     * Above everything the site puts on top: the sticky header is 10040, the
     * admissions popup 10000 and the WhatsApp button 9999. At any lower value
     * all three float over the page the reader has just zoomed in to read.
     */
    z-index: 10050;
    background: rgba(9, 26, 17, 0.96);
    display: none;
    flex-direction: column;
}

.tmr-zoom.is-open { display: flex; }

.tmr-zoom__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
}

.tmr-zoom__scroll {
    flex: 1 1 auto;
    overflow: auto;
    padding: 0 0 1.5rem;
    text-align: center;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}

.tmr-zoom__scroll.is-panning { cursor: grabbing; }

.tmr-zoom__canvas {
    display: inline-block;
    background: var(--white);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform-origin: top center;
}

/* ==========================================================================
   Issue archive
   ========================================================================== */

.tmr-archive {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.tmr-issue {
    border: 0;
    padding: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.tmr-issue__thumb {
    position: relative;
    aspect-ratio: 1 / 1.414;
    background: var(--section-bg);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/*
 * aspect-ratio is well supported now, but a browser that ignores it would
 * collapse the card to nothing and hide the archive entirely.
 */
@supports not (aspect-ratio: 1 / 1) {
    .tmr-issue__thumb { height: 240px; }
}

.tmr-issue:hover .tmr-issue__thumb,
.tmr-issue:focus-visible .tmr-issue__thumb {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.tmr-issue__thumb canvas,
.tmr-issue__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmr-issue__spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent);
}

.tmr-issue__badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
}

.tmr-issue__name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.35;
}

.tmr-issue__sub {
    color: var(--text-light);
    font-size: 0.8rem;
}

.tmr-issue[aria-current="true"] .tmr-issue__name { color: var(--primary); }

.tmr-issue[aria-current="true"] .tmr-issue__thumb {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 767px) {
    .tmr-stage { padding: 1.5rem 0 1.25rem; }
    .tmr-stage__inner { padding: 0 0.75rem; }
    .tmr-issue-title { font-size: 1.15rem; }
    .tmr-issue-meta { font-size: 0.7rem; margin-bottom: 1rem; }

    /*
     * Arrows move below the book. Side arrows would eat ~100px of a 360px
     * screen, and the page is the whole point of the screen.
     */
    .tmr-shelf { flex-wrap: wrap; gap: 0.5rem; }
    .tmr-book-wrap { flex: 1 0 100%; order: -1; margin: 0 auto; }
    .tmr-nudge { width: 40px; height: 40px; }

    /*
     * Forces the line break between the book and the arrows.
     *
     * flex-basis:100% on the book is not enough on its own: --tmr-book-max
     * caps its used width well below the row, which leaves just enough room
     * for one arrow to ride up alongside it while the other drops to the next
     * line. This pseudo-element shares the book's order group but follows it
     * in DOM order, so it ends the line and both arrows sit together beneath.
     */
    .tmr-shelf::after {
        content: '';
        flex: 0 0 100%;
        order: -1;
        height: 0;
    }

    .tmr-toolbar { margin-top: 1rem; gap: 0.4rem; }
    .tmr-tool { padding: 0.45rem 0.7rem; font-size: 0.75rem; }
    .tmr-tool--optional { display: none; }
    .tmr-counter { font-size: 0.75rem; padding: 0.45rem 0.7rem; min-width: 92px; }

    .tmr-archive { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
    .tmr-share__label { flex-basis: 100%; text-align: center; margin: 0 0 0.25rem; }
}

/*
 * Printing the reader itself would produce a screenshot of a canvas at screen
 * resolution. The PDF is right there and prints properly, so send people to it.
 */
@media print {
    .tmr-stage,
    .tmr-zoom,
    .tmr-archive { display: none !important; }

    .tmr-print-note { display: block !important; }
}

.tmr-print-note { display: none; }