/* ============================================================================
   JF Blog — main stylesheet
   Light palette  "Foolscap"        Dark palette  "Screening Room"
   Both are warm-neutral rather than blue-grey, which is what keeps the feel
   closer to a printed literary journal than a generic web app.
   ========================================================================== */

/* ── Palette ─────────────────────────────────────────────────────────────── */
:root {
    --bg:            #FBF8F3;
    --bg-card:       #FFFFFF;
    --bg-quote:      #F4EDE2;
    --bg-inset:      #F4EDE2;
    --text:          #2B2724;
    --heading:       #16130F;
    --muted:         #7A7169;
    --accent:        #8C2F1F;
    --accent-hover:  #A83A26;
    --on-accent:     #FFFFFF;
    --gold:          #B08D57;
    --border:        #E4DCD0;
    --border-strong: #D3C7B6;
    --shadow-sm:     0 1px 2px rgba(43, 39, 36, .06);
    --shadow:        0 2px 12px rgba(43, 39, 36, .08);
    --shadow-lg:     0 12px 40px rgba(43, 39, 36, .14);
    --skeleton:      #EFE8DD;

    --font-body:     'Merriweather', Georgia, 'Times New Roman', serif;
    --font-display:  'Crimson Text', Georgia, 'Times New Roman', serif;
    --font-ui:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --radius:        4px;
    --radius-lg:     8px;
    --header-h:      68px;
    --wrap:          1180px;
    --col-gap:       56px;
    --sidebar-w:     320px;
}

[data-theme="dark"] {
    --bg:            #14110F;
    --bg-card:       #1C1917;
    --bg-quote:      #221D19;
    --bg-inset:      #221D19;
    --text:          #DCD3C7;
    --heading:       #F2EBE0;
    --muted:         #948A7E;
    --accent:        #E0654F;
    --accent-hover:  #EE7C67;
    --on-accent:     #1A100D;
    --gold:          #D4AF6A;
    --border:        #2E2823;
    --border-strong: #3D362F;
    --shadow-sm:     0 1px 2px rgba(0, 0, 0, .4);
    --shadow:        0 2px 14px rgba(0, 0, 0, .45);
    --shadow-lg:     0 14px 44px rgba(0, 0, 0, .6);
    --skeleton:      #241F1B;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, iframe { max-width: 100%; }
img { height: auto; display: block; }

/* Every featured image, poster and thumbnail sits a shade back from full
   strength so the artwork never competes with the text. Kept in one place
   rather than repeated across each component. Hover rules that set their own
   opacity are more specific and still win. Deliberately excluded: the logo,
   images inside post bodies, and the login-gate preview, which is already
   dimmed with a brightness filter. */
.jfb-card__media img,
.jfb-article__hero img,
.jfb-tile__img,
.jfb-strip__item img,
.jfb-poster-card__img,
.jfb-poster-wall img,
.jfb-suggest__item img,
.jfb-archive-head__thumb {
    opacity: .9;
}
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    transition: background-color .25s ease, color .25s ease;
}
body.jfb-modal-open { overflow: hidden; }

a { color: var(--accent); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--heading);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -.01em;
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.jfb-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.jfb-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.screen-reader-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.jfb-eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}
.jfb-rule { height: 1px; background: var(--border); border: 0; margin: 40px 0; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.jfb-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 600; letter-spacing: .04em;
    padding: 11px 20px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
    text-align: center;
}
.jfb-btn--primary { background: var(--accent); color: var(--on-accent); }
.jfb-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.jfb-btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); }
.jfb-btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.jfb-btn--ghost { background: transparent; color: var(--muted); }
.jfb-btn--ghost:hover { color: var(--accent); }
.jfb-btn--lg { padding: 14px 28px; font-size: 14px; }
.jfb-btn--sm { padding: 8px 14px; font-size: 12px; }
.jfb-btn--block { width: 100%; }
.jfb-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.jfb-header {
    position: sticky; top: 0; z-index: 200;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.jfb-header__inner {
    max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
    height: var(--header-h);
    display: flex; align-items: center; gap: 28px;
}
.jfb-logo {
    font-family: var(--font-display);
    font-size: 23px; font-weight: 700; letter-spacing: .02em;
    color: var(--heading); white-space: nowrap;
}
.jfb-logo:hover { color: var(--heading); }
.jfb-logo img { max-height: 40px; width: auto; }
.jfb-logo__img--light { display: none; }
[data-theme="light"] .jfb-logo__img--light { display: block; }
[data-theme="light"] .jfb-logo__img--dark  { display: none; }

/* The menu is a burger-triggered panel at every width, not just on small
   screens: the list of categories outgrew what a single horizontal row could
   hold on desktop, and the overflow wrapped into the header. */
.jfb-nav {
    display: none;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    padding: 8px 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
}
.jfb-nav.is-open { display: flex; }
.jfb-nav a {
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--text);
    /* The panel is full-bleed while the header content is centred inside
       --wrap, so the links are indented to line up with the logo. */
    padding: 13px max(24px, calc((100% - var(--wrap)) / 2 + 24px));
}
.jfb-nav a:hover,
.jfb-nav .current-menu-item > a { color: var(--accent); background: var(--bg-inset); }

.jfb-header__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.jfb-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: transparent; border: 0; border-radius: 50%;
    color: var(--text); cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.jfb-icon-btn:hover { background: var(--bg-inset); color: var(--accent); }
.jfb-icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* Theme toggle */
.jfb-toggle {
    display: inline-flex; align-items: center; gap: 2px;
    background: var(--bg-inset);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    cursor: pointer;
}
.jfb-toggle__opt {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 24px; border: 0; background: transparent;
    border-radius: 999px; cursor: pointer; color: var(--muted);
    transition: background-color .18s ease, color .18s ease;
}
.jfb-toggle__opt svg { width: 15px; height: 15px; fill: currentColor; }
:root .jfb-toggle__opt[data-set="light"],
[data-theme="dark"] .jfb-toggle__opt[data-set="dark"] {
    background: var(--bg-card); color: var(--accent); box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .jfb-toggle__opt[data-set="light"] { background: transparent; color: var(--muted); box-shadow: none; }

.jfb-burger { display: inline-flex; }

/* Header search drawer */
.jfb-search-drawer {
    display: none;
    border-top: 1px solid var(--border);
    background: var(--bg-card);
}
.jfb-search-drawer.is-open { display: block; }
.jfb-search-drawer form {
    max-width: var(--wrap); margin: 0 auto; padding: 18px 24px;
    display: flex; gap: 12px;
}
.jfb-search-field { position: relative; flex: 1; }
.jfb-search-drawer input[type="search"] {
    width: 100%;
    font-family: var(--font-body); font-size: 17px;
    padding: 12px 16px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
}
.jfb-search-drawer input[type="search"]:focus { outline: none; border-color: var(--accent); }

/* Type-ahead list */
.jfb-suggest {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 300;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    max-height: 60vh; overflow-y: auto;
}
/* Without this the display below would keep the list visible when hidden. */
.jfb-suggest[hidden] { display: none; }
.jfb-suggest__item {
    display: flex; align-items: center; gap: 13px;
    padding: 8px 14px;
    color: var(--text);
}
.jfb-suggest__item img {
    flex: none; width: 34px; height: 51px;
    object-fit: cover; border-radius: 3px;
    background: var(--skeleton);
}
.jfb-suggest__title { font-family: var(--font-display); font-size: 18px; line-height: 1.3; }
.jfb-suggest__item:hover,
.jfb-suggest__item.is-active { background: var(--bg-inset); color: var(--accent); }

/* ── Page layout ─────────────────────────────────────────────────────────── */
.jfb-layout {
    max-width: var(--wrap); margin: 0 auto; padding: 48px 24px 80px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: var(--col-gap);
    align-items: start;
}
.jfb-layout--full { display: block; }
.jfb-main { min-width: 0; }

/* Single posts run the trailing sections (previous/next, related, comments) as
   a separate grid area, so the sidebar can slot between them on mobile without
   moving on desktop. */
.jfb-layout--single {
    grid-template-areas: "main side" "after side";
    row-gap: 0;
}
.jfb-layout--single .jfb-main    { grid-area: main; }
.jfb-layout--single .jfb-sidebar { grid-area: side; }
.jfb-after { grid-area: after; min-width: 0; }

/* ── Archive header ──────────────────────────────────────────────────────── */
.jfb-archive-head { margin-bottom: 44px; padding-bottom: 22px; border-bottom: 2px solid var(--heading); }
.jfb-archive-head h1 { font-size: 44px; }
.jfb-archive-head p { color: var(--muted); font-size: 15px; margin-top: 10px; }
.jfb-archive-head .jfb-count { font-family: var(--font-ui); font-size: 14px; color: var(--muted); font-weight: 400; }
.jfb-archive-head__row {
    display: flex; align-items: center; gap: 18px;
}
.jfb-archive-head__row h1 { margin: 0; min-width: 0; }
.jfb-archive-head__thumb {
    flex: none;
    width: 88px; height: 88px;
    object-fit: cover; object-position: center top;
    border-radius: var(--radius);
    background: var(--skeleton);
}

/* ── Post list card ──────────────────────────────────────────────────────── */
.jfb-card {
    display: block;
    margin-bottom: 44px;
}

/* Ornamental rule between entries, in place of a plain border */
.jfb-divider {
    display: flex; justify-content: center;
    color: var(--accent);
    margin-top: 44px;
}
.jfb-divider svg { width: min(430px, 92%); height: auto; display: block; }
.jfb-card:last-of-type .jfb-divider { display: none; }
.jfb-card__media { display: block; position: relative; margin-bottom: 22px; overflow: hidden; border-radius: var(--radius-lg); background: var(--skeleton); }
.jfb-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.jfb-card__media:hover img { transform: scale(1.03); }
/* Runtime laid over the image. Its own dark chip in both colour schemes, since
   it sits on artwork rather than on the page background. */
.jfb-card__duration {
    position: absolute; right: 12px; bottom: 12px;
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 9px;
    color: #fff;
    background: rgba(18, 16, 15, .78);
    border-radius: 999px;
    backdrop-filter: blur(3px);
}
/* Vertical poster variant — used on mobile in place of the wide image */
.jfb-card__media--poster { display: none; }
.jfb-card__media--poster img { aspect-ratio: 2 / 3; }

.jfb-card__title { font-size: 36px; margin-bottom: 10px; }
.jfb-card__title a { color: var(--heading); }
.jfb-card__title a:hover { color: var(--accent); }
.jfb-card__excerpt { color: var(--text); margin: 14px 0 18px; }
.jfb-card__excerpt p { margin: 0; }
.jfb-card__more {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase;
}
.jfb-card__more::after { content: " \2192"; }

/* ── Entry meta ──────────────────────────────────────────────────────────── */
.jfb-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: 12.5px; color: var(--muted);
    letter-spacing: .02em;
}
.jfb-meta a { color: var(--muted); }
.jfb-meta a:hover { color: var(--accent); }
.jfb-meta__sep { opacity: .5; }
.jfb-meta__avatar { width: 26px; height: 26px; border-radius: 50%; }

/* ── Tag pills ───────────────────────────────────────────────────────────── */
.jfb-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
.jfb-tags--card { margin: 14px 0 16px; }
.jfb-tags--article { margin: 26px 0 6px; }
.jfb-tags a,
.jfb-tags span {
    font-family: var(--font-ui); font-size: 11px; font-weight: 500;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    color: var(--muted);
}
.jfb-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Language / country index ────────────────────────────────────────────── */
.jfb-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.jfb-cloud__item {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 9px 15px;
    font-family: var(--font-ui); font-size: 14px;
    color: var(--text);
    border: 1px solid var(--border-strong); border-radius: 999px;
    transition: color .18s ease, border-color .18s ease;
}
.jfb-cloud__item:hover { color: var(--accent); border-color: var(--accent); }
.jfb-cloud__count {
    font-size: 11px; font-weight: 600; color: var(--muted);
    background: var(--bg-quote); border-radius: 999px; padding: 2px 8px;
}
.jfb-cloud__item:hover .jfb-cloud__count { color: var(--accent); }
.jfb-cloud--empty { color: var(--muted); font-size: 15px; }

/* ── Single article ──────────────────────────────────────────────────────── */
.jfb-article__head { margin-bottom: 30px; }
.jfb-article__title { font-size: 52px; margin: 10px 0 12px; }
.jfb-article__standfirst {
    font-size: 20px; font-style: italic; color: var(--muted);
    line-height: 1.5; margin-bottom: 20px; font-family: var(--font-body);
}
.jfb-article__meta { padding: 16px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.jfb-article__hero { margin: 30px 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--skeleton); }
.jfb-article__hero img { width: 100%; }
.jfb-article__hero figcaption {
    font-family: var(--font-ui); font-size: 12px; color: var(--muted);
    padding: 10px 2px 0;
}

/* Video block sits where the hero image would be */
.jfb-video { margin: 30px 0; }
.jfb-bunny-wrap {
    position: relative; padding-top: 56.25%;
    border-radius: var(--radius-lg); overflow: hidden;
    background: #000; box-shadow: var(--shadow);
}
.jfb-bunny-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ── Article body typography ─────────────────────────────────────────────── */
.jfb-content { font-size: 18px; line-height: 1.85; }
.jfb-content > * + * { margin-top: 1.35em; }
/* p { margin: 0 } is more specific than > * + *, so paragraph gaps have to
   be set on p itself or they collapse. The app's <br><br> becomes <p> tags
   via wpautop; without this they sit flush. */
.jfb-content p { margin: 0; }
.jfb-content p + p { margin-top: 1.35em; }
.jfb-content h2 { font-size: 30px; margin-top: 1.9em; }
.jfb-content h3 { font-size: 23px; margin-top: 1.7em; }
.jfb-content h4 { font-size: 19px; font-family: var(--font-ui); font-weight: 600; letter-spacing: .02em; }
.jfb-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.jfb-content ul, .jfb-content ol { padding-left: 1.4em; }
.jfb-content ul { list-style: disc; }
.jfb-content ol { list-style: decimal; }
.jfb-content li + li { margin-top: .5em; }
.jfb-content li::marker { color: var(--gold); }
.jfb-content img, .jfb-content figure { border-radius: var(--radius-lg); }
.jfb-content figcaption {
    font-family: var(--font-ui); font-size: 12.5px; color: var(--muted);
    margin-top: 10px; text-align: center;
}
.jfb-content blockquote {
    border-left: 3px solid var(--accent);
    background: var(--bg-quote);
    padding: 20px 26px;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 19px; font-style: italic; color: var(--heading);
}
.jfb-content blockquote cite {
    display: block; margin-top: 10px;
    font-family: var(--font-ui); font-size: 11px; font-style: normal;
    letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.jfb-content code, .jfb-content pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
    background: var(--bg-inset); border-radius: var(--radius);
}
.jfb-content code { padding: 2px 6px; }
.jfb-content pre { padding: 18px; overflow-x: auto; }
.jfb-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.jfb-content th, .jfb-content td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.jfb-content th { font-family: var(--font-ui); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jfb-content iframe { border-radius: var(--radius-lg); }

.jfb-content__more-wrap {
    margin-top: 2.2em;
    text-align: center;
}
.jfb-content__read-full {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    padding: 18px 40px;
    font-size: 17px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.jfb-content__more { margin-top: 1.35em; }
.jfb-content.is-expanded > .jfb-content__more-wrap { display: none; }
.jfb-content.is-expanded .jfb-content__ellipsis { display: none; }

/* Drop cap on the opening paragraph */
.jfb-content > p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 4.4em;
    line-height: .82;
    font-weight: 700;
    color: var(--accent);
    padding: .06em .1em 0 0;
}

/* ── Article footer ──────────────────────────────────────────────────────── */
.jfb-article__foot { margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--border); }
.jfb-share { margin-top: 26px; }
.jfb-share__label {
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 10px;
}
.jfb-share__icons { display: flex; flex-wrap: wrap; gap: 10px; }
.jfb-share__btn {
    width: 40px; height: 40px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-strong); border-radius: 999px;
    background: none; color: var(--muted); cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.jfb-share__btn svg { width: 18px; height: 18px; fill: currentColor; }
.jfb-share__btn:hover,
.jfb-share__btn:focus-visible {
    color: var(--on-accent); background: var(--accent); border-color: var(--accent);
}
.jfb-share__btn.is-copied { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* Related — filmstrip of posters */
.jfb-related { margin-top: 56px; }
.jfb-related__row + .jfb-related__row { margin-top: 40px; }
.jfb-strip {
    display: grid; grid-auto-flow: column; grid-auto-columns: 148px;
    gap: 16px; overflow-x: auto; padding: 16px 0;
    border-top: 2px dashed var(--border-strong);
    border-bottom: 2px dashed var(--border-strong);
    scrollbar-width: thin;
}
.jfb-strip__item img {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--radius); background: var(--skeleton);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease;
}
.jfb-strip__item:hover img { transform: translateY(-4px); }
.jfb-strip__item span {
    display: block; margin-top: 8px;
    font-family: var(--font-ui); font-size: 12px; color: var(--text); line-height: 1.35;
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.jfb-sidebar { position: sticky; top: calc(var(--header-h) + 28px); }
.jfb-widget {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}
.jfb-widget__title,
.jfb-related h2 {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gold);
    line-height: 1.4;
    margin: 0 0 16px;
}
.jfb-widget ul li { padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.jfb-widget ul li:last-child { border-bottom: 0; }

/* Poster / scorecard */
.jfb-poster-card__img {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--radius); background: var(--skeleton);
    box-shadow: var(--shadow);
}
.jfb-poster-card__rating {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0 4px;
}
.jfb-poster-card__score { font-family: var(--font-ui); font-size: 13px; color: var(--muted); }

.jfb-facts { margin-top: 14px; }
.jfb-facts__row {
    display: flex; justify-content: space-between; gap: 14px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.jfb-facts__row:last-child { border-bottom: 0; }
.jfb-facts__key {
    font-family: var(--font-ui); font-size: 10.5px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    white-space: nowrap; padding-top: 3px;
}
.jfb-facts__val { font-size: 14px; color: var(--text); text-align: right; }

/* Poster wall in sidebar */
.jfb-poster-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.jfb-poster-wall img {
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: 3px; background: var(--skeleton);
    transition: opacity .2s ease;
}
.jfb-poster-wall a:hover img { opacity: .78; }

/* Poster Grid: two-up in the sidebar, same poster gap as “More Like This”. */
.jfb-poster-wall-widget .jfb-poster-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.jfb-poster-wall-widget .jfb-poster-wall img {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, opacity .2s ease;
}
.jfb-poster-wall-widget .jfb-poster-wall a:hover img {
    opacity: .9;
    transform: translateY(-4px);
}

/* Tag image grid: desktop stays in the sidebar; a second copy is printed
   above the listing and only shown on tablet/phone as a side-scroll. */
.jfb-tag-cloud-mobile { display: none; }

@media (max-width: 900px) {
    .jfb-sidebar .jfb-tag-image-cloud-widget { display: none; }
    .jfb-tag-cloud-mobile { display: block; margin-bottom: 28px; }
    .jfb-tag-cloud-mobile .jfb-poster-wall {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding-bottom: 6px;
        scrollbar-width: thin;
    }
    .jfb-tag-cloud-mobile .jfb-poster-wall a {
        flex: 0 0 auto;
        width: 150px;
        scroll-snap-align: start;
    }
    .jfb-tag-cloud-mobile .jfb-poster-wall img {
        width: 100%;
        aspect-ratio: 2 / 3;
        object-fit: cover;
    }
}

/* ── Stars ───────────────────────────────────────────────────────────────── */
.jfb-stars { position: relative; display: inline-block; font-size: 17px; line-height: 1; letter-spacing: 2px; white-space: nowrap; }
.jfb-stars__bg { color: var(--border-strong); }
.jfb-stars__fill { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--gold); }

/* ── Taxonomy grid (category / tag archives) ─────────────────────────────── */
.jfb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 26px 20px;
}
.jfb-tile { display: block; }
.jfb-tile__img {
    display: block;
    width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
    border-radius: var(--radius); background: var(--skeleton);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}
.jfb-tile:hover .jfb-tile__img { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.jfb-tile__title {
    display: block;
    font-family: var(--font-display); font-size: 16px; font-weight: 700;
    color: var(--heading); margin-top: 11px; line-height: 1.3;
}
.jfb-tile:hover .jfb-tile__title { color: var(--accent); }
.jfb-tile__sub { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--muted); margin-top: 3px; }

/* Filter bar */
.jfb-filters { display: flex; gap: 12px; align-items: center; }
.jfb-select {
    font-family: var(--font-ui); font-size: 13px;
    padding: 9px 14px;
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
    cursor: pointer;
}
.jfb-select:focus { outline: none; border-color: var(--accent); }
.jfb-select--block { width: 100%; }

/* ── Pagination ──────────────────────────────────────────────────────────── */
.jfb-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 56px; }
.jfb-page-btn {
    min-width: 38px; height: 38px; padding: 0 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-ui); font-size: 13px;
    border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text);
}
.jfb-page-btn:hover { border-color: var(--accent); color: var(--accent); }
.jfb-page-btn--active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.jfb-page-btn--active:hover { color: var(--on-accent); }
.jfb-page-ellipsis { display: inline-flex; align-items: center; padding: 0 4px; color: var(--muted); }

/* ── Login gate ──────────────────────────────────────────────────────────── */
.jfb-gate { margin: 30px 0; text-align: center; }
.jfb-gate__preview { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--skeleton); }
.jfb-gate__preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; filter: brightness(.42); }
.jfb-gate__overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    color: #fff;
}
.jfb-gate__lock { width: 46px; height: 46px; fill: currentColor; opacity: .9; }
.jfb-gate__text { font-family: var(--font-ui); font-size: 14px; letter-spacing: .04em; }
.jfb-gate__actions { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

/* ── Modals ──────────────────────────────────────────────────────────────── */
.jfb-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; }
.jfb-modal[hidden] { display: none; }
.jfb-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 17, 15, .72); backdrop-filter: blur(3px); }
.jfb-modal__box {
    position: relative;
    background: var(--bg-card); color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 34px 30px; max-width: 420px; width: 100%; text-align: center;
}
.jfb-modal__box h2, .jfb-modal__box h3 { font-size: 23px; margin-bottom: 8px; }
.jfb-modal__box p { color: var(--muted); font-size: 15px; }
.jfb-modal__close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: 0; font-size: 26px; line-height: 1;
    color: var(--muted); cursor: pointer;
}
.jfb-modal__close:hover { color: var(--accent); }
.jfb-modal__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }

/* Rating modal stars */
.jfb-rate-stars { display: flex; gap: 6px; justify-content: center; margin: 22px 0 6px; }
.jfb-rate-star {
    background: none; border: 0; cursor: pointer;
    font-size: 34px; line-height: 1; color: var(--border-strong);
    transition: color .12s ease, transform .12s ease;
}
.jfb-rate-star:hover { transform: scale(1.12); }
.jfb-rate-star.is-active { color: var(--gold); }
.jfb-rate-thanks { color: var(--accent); font-family: var(--font-ui); font-size: 14px; margin-top: 14px; }

/* Your-rating strip under the player */
.jfb-your-rating {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-family: var(--font-ui); font-size: 13px; color: var(--muted);
    margin-top: 14px;
}
/* display:flex would otherwise beat the browser's [hidden] rule */
.jfb-your-rating[hidden] { display: none; }

/* ── Comments ────────────────────────────────────────────────────────────── */
.jfb-comments-wrap { margin-top: 56px; }
.jfb-comments__title {
    font-family: var(--font-ui); font-size: 12px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
    margin-bottom: 22px;
}
.jfb-comments__list { margin-bottom: 40px; }
.jfb-comments__closed { color: var(--muted); }
.jfb-comment-gate {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    text-align: center;
}
.jfb-comment-gate__title {
    font-family: var(--font-display); font-size: 26px; color: var(--heading);
}
.jfb-comment-gate__text { color: var(--muted); margin-top: 8px; margin-bottom: 18px; }

/* ── Auth forms ──────────────────────────────────────────────────────────── */
.jfb-auth { max-width: 420px; margin: 70px auto 90px; padding: 0 24px; }
.jfb-auth__box {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 38px 32px; box-shadow: var(--shadow);
}
.jfb-auth__title { font-size: 30px; text-align: center; }
.jfb-auth__sub { color: var(--muted); font-size: 15px; text-align: center; margin-top: 8px; }
.jfb-auth__note { color: var(--muted); font-size: 13px; text-align: center; margin-top: 10px; font-style: italic; }
.jfb-auth__error {
    background: var(--bg-quote); border-left: 3px solid var(--accent);
    color: var(--heading); font-size: 14px;
    padding: 12px 14px; border-radius: 0 var(--radius) var(--radius) 0; margin-top: 22px;
}
.jfb-field { margin-top: 18px; }
.jfb-label {
    display: block; margin-bottom: 7px;
    font-family: var(--font-ui); font-size: 11px; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.jfb-input {
    width: 100%;
    font-family: var(--font-body); font-size: 16px;
    padding: 12px 14px;
    background: var(--bg); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.jfb-input:focus { outline: none; border-color: var(--accent); }
.jfb-check { display: flex; align-items: center; gap: 9px; margin-top: 16px; }
.jfb-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.jfb-check label { font-family: var(--font-ui); font-size: 13px; color: var(--muted); cursor: pointer; }
.jfb-auth__alt { text-align: center; font-family: var(--font-ui); font-size: 13px; color: var(--muted); margin-top: 20px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.jfb-empty { text-align: center; padding: 80px 20px; }
.jfb-empty h2 { font-size: 26px; margin-bottom: 10px; }
.jfb-empty p { color: var(--muted); margin-bottom: 22px; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.jfb-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-card);
    padding: 46px 0 34px;
    margin-top: 40px;
}
.jfb-footer__inner {
    max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
    display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: center;
}
.jfb-footer__brand { font-family: var(--font-display); font-size: 22px; color: var(--heading); }
.jfb-footer__nav { display: flex; flex-wrap: wrap; gap: 22px; }
.jfb-footer__nav a,
.jfb-footer__copy {
    font-family: var(--font-ui); font-size: 12.5px; color: var(--muted);
}
.jfb-footer__nav a:hover { color: var(--accent); }
.jfb-footer__copy { width: 100%; padding-top: 22px; margin-top: 6px; border-top: 1px solid var(--border); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1020px) {
    :root { --col-gap: 40px; --sidebar-w: 280px; }
}

/*
 * Widget placement (single posts):
 *   phones (any orientation) and tablet portrait → sidebar under the article
 *   tablet landscape and desktop → sidebar on the right
 * Phone landscape is caught by max-width / short height so a phone on its
 * side does not get the two-column desktop layout.
 */
@media (max-width: 900px),
       (max-width: 1400px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 500px) {
    .jfb-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    .jfb-sidebar { position: static; }
    .jfb-layout--single { grid-template-areas: "main" "side" "after"; row-gap: 24px; }
    .jfb-layout--single .jfb-sidebar .jfb-widget:last-child { margin-bottom: 0; }
    .jfb-layout--single .jfb-related { margin-top: 0; }

    .jfb-poster-wall-widget .jfb-poster-wall {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 148px;
        overflow-x: auto;
        padding: 16px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
}

/* Full-width Film Info poster is oversized on tablet portrait; keep it on
   phones, tablet landscape, and desktop. */
@media (min-width: 768px) and (max-width: 1400px) and (orientation: portrait) {
    .jfb-layout--single .jfb-poster-card { display: none; }
}

@media (max-width: 900px) {
    .jfb-layout {
        padding: 32px 20px 64px;
    }
    .jfb-card__media--wide { display: none; }
    /* Capped on tablets, where a full-width 2:3 poster would be taller than the
       viewport; full width on phones. */
    .jfb-card__media--poster { display: block; max-width: 420px; margin-inline: auto; }

    .jfb-article__title { font-size: 40px; }
    .jfb-card__title { font-size: 33px; }
    .jfb-archive-head h1 { font-size: 36px; }
    .jfb-content { font-size: 17px; }
    body { font-size: 16px; }
    .jfb-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 20px 14px; }
}

@media (max-width: 600px) {
    .jfb-card__media--poster { max-width: none; }
}

@media (max-width: 520px) {
    .jfb-article__title { font-size: 34px; }
    .jfb-article__standfirst { font-size: 17px; }
    .jfb-card__title { font-size: 30px; }
    .jfb-content > p:first-of-type::first-letter { font-size: 3.6em; }
    .jfb-grid { grid-template-columns: repeat(2, 1fr); }
    .jfb-auth__box { padding: 28px 22px; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .jfb-header, .jfb-sidebar, .jfb-footer, .jfb-share, .jfb-related, .jfb-video { display: none; }
    .jfb-layout { display: block; padding: 0; }
    body { background: #fff; color: #000; font-size: 12pt; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}