/* Film Notes (/blog, /blog/<entry>) — a filmmaker's journal. Markup: functions/_lib/theme.js. */

/* Shared page rules, same as the inline block on the static pages. */
.nav-links { gap: 2.6rem; }
@media (min-width: 768px) and (max-width: 1100px) { .nav-links { gap: 1.7rem; } }
html { scroll-behavior: smooth; }
@media (min-width: 768px) and (max-width: 1799px) { html { font-size: 90%; } }
body { font-family: 'Montserrat', sans-serif; background-color: #0A0A0A; color: #FFFFFF; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

/* Screenplay type for the working notes: edge codes, slate labels, FADE OUT. */
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/courier-prime.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/courier-prime-bold.woff2') format('woff2'); }

.fn-page {
    --fn-accent: #8E9AAF;
    --fn-muted: #9CA3AF;
    --fn-text: #D1D5DB;
    --fn-base: #1B1B1B;
    --fn-frame-top: #131313;
    --fn-frame-bottom: #0C0C0C;
    --fn-mono: 'Courier Prime', 'Courier New', ui-monospace, monospace;
    /* Perforations: holes punched through to the page black. */
    --fn-sprocket-v: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='24'%3E%3Crect%20x='9'%20y='7'%20width='14'%20height='10'%20rx='2.5'%20fill='%230A0A0A'/%3E%3C/svg%3E");
    --fn-sprocket-h: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='28'%3E%3Crect%20x='7'%20y='8'%20width='10'%20height='12'%20rx='2.5'%20fill='%230A0A0A'/%3E%3C/svg%3E");
    --fn-grain: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%3E%3Cfilter%20id='ng'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.85'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='100%25'%20height='100%25'%20filter='url(%23ng)'/%3E%3C/svg%3E");
}

.blog-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.fn-main { padding-bottom: 0; }

/* ---------- shared marks ---------- */

.fn-eyebrow {
    color: var(--fn-accent); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.4em; text-transform: uppercase; margin-bottom: 1rem;
}
.fn-accent { font-family: 'Playfair Display', serif; font-style: italic; color: var(--fn-accent); }
.fn-rule { width: 32px; height: 1px; background: rgba(142, 154, 175, 0.5); margin: 2.25rem auto; }

/* Edge code — the numbers printed along the rebate of film stock. */
.fn-code {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
    font-family: var(--fn-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fn-muted); margin-bottom: 1rem;
}
.fn-code--center { justify-content: center; }
.fn-code-no { color: var(--fn-accent); font-weight: 700; }
.fn-code-sep { color: #4B5563; }
.fn-code a { color: inherit; text-decoration: none; }
.fn-code a:hover { color: #FFFFFF; }

.fn-rating { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--fn-text); font-size: 0.875rem; }
/* Ratings are the one warm accent on the site. The stars never split across lines; the score
   may drop beneath them in a narrow column. */
.fn-rating { flex-wrap: wrap; row-gap: 0.2rem; }
.fn-rating-stars { color: #D4AF6A; font-size: 0.8em; letter-spacing: 0.1em; white-space: nowrap; }
.fn-rating--stacked { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
.fn-rating--stacked .fn-rating-num { font-size: 1.6rem; line-height: 1; color: #FFFFFF; }
.fn-rating--stacked .fn-rating-max { font-size: 0.6em; }
.fn-rating-stars .fa-regular { opacity: 0.45; }
.fn-rating-num { font-family: var(--fn-mono); }
.fn-rating-max { color: var(--fn-muted); }

a:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 4px; }

/* ---------- hero ---------- */

.fn-hero { position: relative; isolation: isolate; overflow: hidden; padding: 11rem 0 4.5rem; text-align: center; }
/* Projector light falling from above, under the same grain the homepage uses. */
.fn-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background: radial-gradient(ellipse 55% 70% at 50% 0%, rgba(142, 154, 175, 0.17), rgba(142, 154, 175, 0.04) 45%, transparent 75%);
}
.fn-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.06;
    background-image: var(--fn-grain);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent);
    mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.fn-title { font-size: clamp(3rem, 8vw, 6rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; color: #FFFFFF; }
.fn-lead { color: var(--fn-muted); font-size: 1.125rem; line-height: 1.7; max-width: 36rem; margin: 1.5rem auto 0; }
.fn-hero .fn-rule { margin: 2.25rem auto 1.25rem; }
.fn-counter {
    display: flex; justify-content: center; gap: 0.6rem;
    font-family: var(--fn-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fn-muted);
}

/* ---------- the strip (index) ---------- */

.fn-index { padding-bottom: 6rem; }
.fn-strip {
    --rail: 2.5rem;
    list-style: none; margin: 0 auto; max-width: 72rem; padding: 0.75rem var(--rail);
    background:
        var(--fn-sprocket-v) left top / var(--rail) 1.5rem repeat-y,
        var(--fn-sprocket-v) right top / var(--rail) 1.5rem repeat-y,
        var(--fn-base);
    border-radius: 3px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.fn-frame {
    position: relative;
    background: linear-gradient(180deg, var(--fn-frame-top), var(--fn-frame-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 60px rgba(0, 0, 0, 0.35);
}
.fn-frame + .fn-frame { margin-top: 0.5rem; }

.fn-entry { display: grid; gap: 1.75rem 3rem; padding: 2.25rem 2.5rem; align-items: center; }
@media (min-width: 900px) {
    .fn-frame.has-aside .fn-entry { grid-template-columns: minmax(0, 1fr) 15rem; }
    .fn-frame--featured.has-aside .fn-entry { grid-template-columns: minmax(0, 1fr) 20rem; }
}
.fn-frame--featured .fn-entry { padding: 3.25rem 3rem; }

.fn-entry-title { font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.85rem; }
.fn-frame--featured .fn-entry-title { font-size: clamp(2.1rem, 4vw, 3.1rem); line-height: 1.1; margin-bottom: 1.1rem; }
.fn-entry-link { color: #FFFFFF; text-decoration: none; }
/* The title link covers the whole frame: one tab stop, one link. */
.fn-entry-link::after { content: ""; position: absolute; inset: 0; }
.fn-entry-link:focus-visible { outline: none; }
.fn-frame:has(.fn-entry-link:focus-visible),
.fn-hframe:has(.fn-entry-link:focus-visible) { outline: 2px solid var(--fn-accent); outline-offset: -4px; }

.fn-entry-summary { color: var(--fn-muted); font-size: 1rem; line-height: 1.75; max-width: 44rem; margin-bottom: 1rem; }
.fn-frame--featured .fn-entry-summary { font-size: 1.0625rem; }
.fn-entry-filmline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; font-size: 0.9375rem; color: var(--fn-text); margin-bottom: 0.85rem; }
.fn-entry-by { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--fn-muted); }

.fn-entry-film { text-align: left; }
@media (min-width: 900px) { .fn-entry-film { text-align: right; } .fn-entry-film .fn-rating { justify-content: flex-end; } }
.fn-film-name { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.2rem; color: #FFFFFF; }
.fn-film-year { font-family: var(--fn-mono); font-style: normal; font-size: 0.8125rem; color: var(--fn-muted); }
.fn-film-dir { font-size: 0.875rem; color: var(--fn-muted); margin: 0.2rem 0 0.5rem; }
.fn-entry-filmline .fn-film-dir { margin: 0; }

.fn-still { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #0A0A0A; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06); }
.fn-still img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
    .fn-frame, .fn-hframe { transition: background 0.35s ease; }
    .fn-entry-title, .fn-hframe-title { transition: color 0.35s ease; }
    .fn-still img { transition: transform 0.8s ease; }
    .fn-frame:hover .fn-still img { transform: scale(1.035); }
}
.fn-frame:hover, .fn-hframe:hover { background: linear-gradient(180deg, #181818, #0F0F0F); }
.fn-frame:hover .fn-entry-link, .fn-hframe:hover .fn-entry-link { color: #E5E9F0; }

/* ---------- slate (clapperboard) ---------- */

.fn-clapper { position: relative; height: 1.9rem; }
.fn-clapper span {
    position: absolute; left: 0; right: 0; height: 0.8rem;
    background: repeating-linear-gradient(-55deg, rgba(142, 154, 175, 0.85) 0 0.85rem, #0D0D0D 0.85rem 1.7rem);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
/* The top stick sits open on its hinge. */
.fn-clapper span:first-child { top: 0.15rem; transform: rotate(-2.2deg); transform-origin: 0 100%; }
.fn-clapper span:last-child { bottom: 0; }

.fn-slate-label {
    font-family: var(--fn-mono); font-size: 0.6875rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--fn-accent);
}

.fn-mini-slate {
    position: relative; isolation: isolate; overflow: hidden; border-radius: 3px;
    background: #141414; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 20px 40px -20px rgba(0, 0, 0, 0.9);
}
.fn-mini-slate::after {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.07; pointer-events: none; background-image: var(--fn-grain);
}
.fn-mini-slate-body { padding: 1.25rem 1.5rem 1.5rem; }
.fn-mini-film { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.6rem; line-height: 1.15; color: #FFFFFF; margin: 0.35rem 0 0.4rem; }
.fn-mini-meta { font-size: 0.875rem; color: var(--fn-muted); margin-bottom: 0.75rem; }

/* ---------- double features: two or more films in one entry ---------- */

.fn-amp { font-family: 'Playfair Display', serif; font-style: italic; letter-spacing: 0; text-transform: none; color: var(--fn-muted); }
/* sized like the titles either side of it, not the small caps line it sits in */
.fn-log-meta .fn-amp { font-size: 0.95rem; }
.fn-hframe-film .fn-amp { font-size: 1rem; }
.fn-ratings { display: inline-grid; gap: 0.4rem; }
.fn-mini-feature + .fn-mini-feature { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.fn-mini-feature .fn-mini-film { font-size: 1.35rem; margin-bottom: 0.3rem; }
.fn-mini-feature .fn-mini-meta { margin-bottom: 0.5rem; }
.fn-mini-feature ~ .fn-mini-seen { margin: 1rem 0 0; }
.fn-entry-films > .fn-slate-label { margin-bottom: 0.5rem; }
.fn-entry-feature + .fn-entry-feature { margin-top: 0.9rem; }
.fn-entry-feature .fn-film-dir { margin-bottom: 0.35rem; }
.fn-entry-films .fn-film-seen { margin: 0.9rem 0 0; }
.fn-entry-filmline--feature { margin-bottom: 0.4rem; }
.fn-entry-filmline--feature:has(+ .fn-entry-by) { margin-bottom: 0.85rem; }

/* ---------- empty reel ---------- */

.fn-frame--empty { padding: 4.5rem 2rem; text-align: center; }
.fn-empty .fn-code { justify-content: center; }
.fn-empty-message { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); color: #FFFFFF; margin-top: 1.25rem; }
.fn-empty .fn-rule { margin: 1.75rem auto; }
.fn-empty-link { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; }
.fn-empty-link a { color: #FFFFFF; text-decoration: none; padding: 0.5rem 0; }
.fn-empty-link a:hover { color: var(--fn-accent); }

/* ---------- pager ---------- */

.fn-pager {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    max-width: 72rem; margin: 2.5rem auto 0;
    font-family: var(--fn-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.fn-pager a { color: #FFFFFF; text-decoration: none; padding: 0.5rem 0; }
.fn-pager a:hover { color: var(--fn-accent); }
.fn-pager-count { color: var(--fn-muted); }

/* ---------- entry (post) ---------- */

.fn-progress { display: none; }
@supports (animation-timeline: scroll()) {
    .fn-progress {
        display: block; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
        background: var(--fn-accent); transform-origin: 0 50%; transform: scaleX(0);
        animation: fn-progress linear both; animation-timeline: scroll(root);
    }
    @keyframes fn-progress { to { transform: scaleX(1); } }
}

.fn-article-head { max-width: 52rem; margin: 0 auto; padding: 10.5rem 1.5rem 0; text-align: center; }
.fn-article-title { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 700; line-height: 1.06; letter-spacing: -0.015em; color: #FFFFFF; margin: 0.25rem 0 1.5rem; }
.fn-byline { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 0.6rem; font-size: 0.875rem; color: var(--fn-muted); letter-spacing: 0.03em; }
.fn-article-head .fn-rule { margin: 2.5rem auto 3rem; }

/* A still, threaded into a strip of film. */
.fn-reel { max-width: 72rem; margin: 0 auto 3.5rem; padding: 0 1.5rem; }
.fn-reel-frame {
    padding: 1.9rem 0.6rem;
    background:
        var(--fn-sprocket-h) left top / 1.5rem 1.75rem repeat-x,
        var(--fn-sprocket-h) left bottom / 1.5rem 1.75rem repeat-x,
        var(--fn-base);
    border-radius: 3px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.fn-reel-frame img { display: block; width: 100%; height: auto; }

.fn-slate {
    position: relative; isolation: isolate; overflow: hidden;
    max-width: 46rem; margin: 0 auto 3.5rem; border-radius: 3px;
    background: #131313; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 30px 60px -30px rgba(0, 0, 0, 0.95);
}
.fn-slate::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.07; pointer-events: none; background-image: var(--fn-grain); }
.fn-slate-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, 0.09); }
/* Each cell draws its own right and bottom rule; the slate's overflow clips the outer ones, and a
   missing field just leaves open space instead of a broken line. */
.fn-slate-grid > div {
    padding: 1rem 1.25rem 1.1rem;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.09), 0 1px 0 rgba(255, 255, 255, 0.09);
}
.fn-slate-film, .fn-slate-rating { grid-column: 1 / -1; }
/* 12 columns: film + rating share the top row (8 + 4); the small fields sit four to a row. A show's
   venue and company run longer than a year or a director, so its row splits 5 + 4 + 3. */
@media (min-width: 640px) {
    .fn-slate-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .fn-slate-grid > div { grid-column: span 3; }
    .fn-slate-grid > .fn-slate-film { grid-column: span 8; }
    .fn-slate-grid > .fn-slate-rating { grid-column: span 4; }
    .fn-slate-grid > .fn-slate-venue { grid-column: span 5; }
    .fn-slate-grid > .fn-slate-by { grid-column: span 4; }
    /* No rating: the title takes the whole top row rather than leaving a hole beside it. */
    .fn-slate-grid > .fn-slate-film:not(:has(+ .fn-slate-rating)) { grid-column: 1 / -1; }
    /* A double feature: per film, title + rating (8 + 4) over year + director (4 + 8); where they
       were seen + the entry number close it (8 + 4). A missing field gives its row-mate the width. */
    .fn-slate--feature .fn-slate-grid > .fn-slate-year { grid-column: span 4; }
    .fn-slate--feature .fn-slate-grid > .fn-slate-dir { grid-column: span 8; }
    .fn-slate--feature .fn-slate-grid > .fn-slate-dir:not(.fn-slate-year + *),
    .fn-slate--feature .fn-slate-grid > .fn-slate-year:not(:has(+ .fn-slate-dir)) { grid-column: 1 / -1; }
    .fn-slate--feature .fn-slate-grid > .fn-slate-seen { grid-column: span 8; }
    .fn-slate--feature .fn-slate-grid > .fn-slate-entry { grid-column: span 4; }
    .fn-slate--feature .fn-slate-grid > .fn-slate-seen:not(:has(+ .fn-slate-entry)),
    .fn-slate--feature .fn-slate-grid > .fn-slate-entry:not(.fn-slate-seen + *) { grid-column: 1 / -1; }
}
.fn-slate-grid > .fn-slate-film { padding: 1.25rem 1.25rem 1.35rem; }
.fn-slate-grid dd { margin-top: 0.35rem; font-size: 1rem; color: #FFFFFF; }
.fn-slate-film dd { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; }

.fn-body { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
/* Drop cap on the opening paragraph. */
.fn-body > p:first-child::first-letter {
    float: left; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--fn-accent);
    font-size: 4.3em; line-height: 0.78; padding: 0.07em 0.12em 0 0;
}

.fn-article-end {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 1rem 2rem;
    max-width: 44rem; margin: 4rem auto 0; padding: 1.75rem 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fn-signoff { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem; color: #FFFFFF; order: 1; }
/* Screenplay convention: the last line of a script, flush right. */
.fn-endmark { font-family: var(--fn-mono); font-weight: 700; font-size: 0.9375rem; letter-spacing: 0.2em; color: var(--fn-muted); order: 2; margin-left: auto; }

/* ---------- more film notes ---------- */

.fn-more { padding: 7rem 0 1rem; }
.fn-more-heading { text-align: center; font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: #FFFFFF; margin-bottom: 2.75rem; }
.fn-hstrip {
    list-style: none; margin: 0 auto; max-width: 72rem;
    display: grid; grid-template-columns: 1fr; gap: 0.5rem; padding: 1.9rem 0.6rem;
    background:
        var(--fn-sprocket-h) left top / 1.5rem 1.75rem repeat-x,
        var(--fn-sprocket-h) left bottom / 1.5rem 1.75rem repeat-x,
        var(--fn-base);
    border-radius: 3px;
    box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
@media (min-width: 900px) { .fn-hstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fn-hframe {
    position: relative; padding: 1.75rem 1.75rem 2rem; min-height: 11rem;
    background: linear-gradient(180deg, var(--fn-frame-top), var(--fn-frame-bottom));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), inset 0 0 50px rgba(0, 0, 0, 0.35);
}
.fn-hframe-title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; margin-bottom: 0.75rem; }
.fn-hframe-film { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.875rem; color: var(--fn-text); margin-bottom: 0.6rem; }
.fn-hframe-film .fn-film-name { font-size: 1rem; }
.fn-hframe-film .fn-film-dir { margin: 0; }
.fn-hframe-summary { font-size: 0.9375rem; line-height: 1.65; color: var(--fn-muted); }

.fn-back { text-align: center; margin-top: 2.5rem; font-family: var(--fn-mono); font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.fn-back a { color: #FFFFFF; text-decoration: none; padding: 0.5rem 0; }
.fn-back a:hover { color: var(--fn-accent); }
.fn-back--solo { margin: 4rem 0 0; }

/* ---------- studio sign-off ---------- */

.fn-studio { position: relative; isolation: isolate; text-align: center; padding: 7rem 0 7.5rem; }
.fn-studio::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(142, 154, 175, 0.08), transparent 70%);
}
.fn-studio-line { font-family: 'Playfair Display', serif; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; color: #FFFFFF; }
.fn-studio .fn-rule { margin: 2rem auto 2.25rem; }
.fn-studio-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.fn-btn {
    display: inline-block; padding: 1rem 1.9rem; border-radius: 2px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
    color: #FFFFFF; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.2);
}
.fn-btn:hover { border-color: rgba(255, 255, 255, 0.45); }
.fn-btn--solid { background: linear-gradient(145deg, #4A5568 0%, #111111 100%); border-color: rgba(255, 255, 255, 0.06); }
.fn-btn--solid:hover { border-color: rgba(255, 255, 255, 0.2); }
@media (prefers-reduced-motion: no-preference) {
    .fn-btn { transition: border-color 0.3s ease, transform 0.3s ease; }
    .fn-btn:hover { transform: translateY(-2px); }
}

/* ---------- prose ---------- */

.blog-prose { color: var(--fn-text); font-size: 1.125rem; line-height: 1.85; }
.blog-prose > * + * { margin-top: 1.4em; }
.blog-prose h2 { color: #FFFFFF; font-size: 1.9rem; font-weight: 700; line-height: 1.25; margin-top: 2.3em; }
.blog-prose h3 { color: #FFFFFF; font-size: 1.4rem; font-weight: 700; line-height: 1.3; margin-top: 2em; }
.blog-prose h4 { color: #FFFFFF; font-size: 1.15rem; font-weight: 700; margin-top: 1.8em; }
.blog-prose h2 + *, .blog-prose h3 + *, .blog-prose h4 + * { margin-top: 0.8em; }
.blog-prose a { color: #FFFFFF; text-decoration: underline; text-decoration-color: var(--fn-accent); text-underline-offset: 0.2em; }
.blog-prose a:hover { color: var(--fn-accent); }
.blog-prose strong { color: #FFFFFF; font-weight: 700; }
.blog-prose em { font-style: italic; }
.blog-prose ul { list-style: disc; padding-left: 1.4em; }
.blog-prose ol { list-style: decimal; padding-left: 1.4em; }
.blog-prose li + li { margin-top: 0.5em; }
.blog-prose li::marker { color: var(--fn-accent); }
.blog-prose blockquote {
    position: relative; margin: 2.4em 0; padding: 0.25em 0 0.25em 1.75rem; border-left: 2px solid var(--fn-accent);
    font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.5rem; line-height: 1.5; color: #FFFFFF;
}
.blog-prose blockquote p + p { margin-top: 0.8em; }
.blog-prose hr { border: 0; height: 1.5rem; margin: 3em 0; border-radius: 2px; background: var(--fn-sprocket-h) left center / 1.5rem 1.5rem repeat-x, var(--fn-base); }
.blog-prose figure img { width: 100%; height: auto; border-radius: 2px; }
.blog-prose figcaption { font-family: var(--fn-mono); color: var(--fn-muted); font-size: 0.8125rem; letter-spacing: 0.04em; text-align: center; margin-top: 0.75rem; }
.blog-prose code { font-family: var(--fn-mono); background: #1A1A1A; border-radius: 2px; padding: 0.1em 0.35em; font-size: 0.9em; }

/* ---------- admin preview banner ---------- */

.fn-preview-banner {
    position: relative; z-index: 60; margin: 0; padding: 6rem 1.5rem 0.75rem;
    background: #1A1A1A; color: #FFFFFF; text-align: center; font-size: 0.8125rem; letter-spacing: 0.05em;
    border-bottom: 1px solid var(--fn-accent);
}
.fn-preview-banner + .fn-article .fn-article-head { padding-top: 4rem; }

/* ---------- phones ---------- */

@media (max-width: 767px) {
    .fn-hero { padding: 8.5rem 0 3.5rem; }
    .fn-lead { font-size: 1rem; }
    .fn-strip { --rail: 1.35rem; padding: 0.5rem var(--rail); }
    .fn-entry, .fn-frame--featured .fn-entry { padding: 1.6rem 1.25rem 1.75rem; }
    .fn-entry-title { font-size: 1.45rem; }
    .fn-code { font-size: 0.6875rem; letter-spacing: 0.08em; }
    .fn-article-head { padding-top: 8rem; }
    .fn-reel { padding: 0; }
    .fn-reel-frame { border-radius: 0; }
    .fn-slate { margin-left: 1.25rem; margin-right: 1.25rem; }
    .blog-prose { font-size: 1.0625rem; line-height: 1.8; }
    .blog-prose blockquote { font-size: 1.25rem; padding-left: 1.1rem; }
    .fn-more { padding-top: 5rem; }
    .fn-studio { padding: 5rem 0 5.5rem; }
}

@media print {
    .fn-progress, .fn-studio, .fn-more { display: none !important; }
}

/* ---------- entry type: tone + icon, like colored tape on a film can ---------- */

/* Type tones — the gold, green and purple of the film game's palette, plus a red for live
   performance, all muted to the same brightness. */
.fn-tone-gold { --fn-tone: #D4AF6A; }
.fn-tone-green { --fn-tone: #7DBE8A; }
.fn-tone-purple { --fn-tone: #9B8CF0; }
.fn-tone-red { --fn-tone: #D9787A; }
.fn-tone-accent { --fn-tone: #8E9AAF; }
.fn-type { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--fn-tone, var(--fn-muted)); font-weight: 700; }
.fn-type i { font-size: 0.95em; }
/* A linked mark opens every entry of its type; it sits above the frame's whole-card link. */
a.fn-type, .fn-code a.fn-type { position: relative; z-index: 1; color: var(--fn-tone, var(--fn-muted)); text-decoration: none; }
a.fn-type:hover, .fn-code a.fn-type:hover { color: var(--fn-tone, var(--fn-muted)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
a.fn-type:focus-visible { outline: 2px solid var(--fn-tone, var(--fn-accent)); outline-offset: 3px; border-radius: 1px; }
/* A strip of tape on the frame's edge in the entry's tone. */
.fn-frame[class*="fn-tone-"]::before, .fn-hframe[class*="fn-tone-"]::before {
    content: ""; position: absolute; left: 0; top: 1.6rem; width: 3px; height: 2.6rem;
    background: var(--fn-tone); border-radius: 0 2px 2px 0; opacity: 0.9;
}
.fn-hframe[class*="fn-tone-"]::before { top: 1.4rem; height: 2rem; }

/* ---------- tags on an entry ---------- */

.fn-tags { max-width: 44rem; margin: 3rem auto 0; padding: 0 1.5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem 1rem; }
.fn-tags ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.fn-tags a {
    display: inline-block; padding: 0.35rem 0.8rem; border-radius: 2px;
    font-family: var(--fn-mono); font-size: 0.8125rem; letter-spacing: 0.06em; color: var(--fn-text);
    text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.14); background: #121212;
}
.fn-tags a:hover { border-color: var(--fn-accent); color: #FFFFFF; }
.fn-slate-grid dd a { color: #FFFFFF; text-decoration: underline; text-decoration-color: rgba(142, 154, 175, 0.6); text-underline-offset: 0.2em; }
.fn-slate-grid dd a:hover { color: var(--fn-accent); }
.fn-counter a, .fn-eyebrow a { color: inherit; text-decoration: underline; text-decoration-color: rgba(142, 154, 175, 0.5); text-underline-offset: 0.25em; }
.fn-counter a:hover, .fn-eyebrow a:hover { color: #FFFFFF; }
.fn-back-sep { color: #4B5563; margin: 0 0.9rem; }

/* ---------- archive ---------- */

.fn-archive { max-width: 72rem; padding-bottom: 6rem; }

/* Entry-type filter: All plus one tab per type, each in its tone. */
.fn-filter { margin-bottom: 2rem; }
.fn-filter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.fn-filter-link {
    display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.95rem; border-radius: 2px;
    font-family: var(--fn-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--fn-tone); text-decoration: none;
    background: #121212; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.fn-filter-link i { font-size: 0.95em; }
.fn-filter-count { font-weight: 400; letter-spacing: 0.08em; color: var(--fn-muted); }
.fn-filter-link:hover { box-shadow: inset 0 0 0 1px var(--fn-tone); }
.fn-filter-link[aria-current="page"] {
    color: #FFFFFF; background: color-mix(in srgb, var(--fn-tone) 16%, #121212);
    box-shadow: inset 0 0 0 1px var(--fn-tone), inset 0 -3px 0 var(--fn-tone);
}
.fn-filter-link[aria-current="page"] i { color: var(--fn-tone); }
.fn-filter-link[aria-current="page"] .fn-filter-count { color: #E5E9F0; }
.fn-filter-link:focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 3px; }
.fn-browse {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 1fr; gap: 2rem 3rem;
    padding: 2rem 2.25rem; margin-bottom: 4.5rem; border-radius: 3px;
    background: #121212; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.9);
}
.fn-browse::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.06; pointer-events: none; background-image: var(--fn-grain); }
@media (min-width: 768px) {
    .fn-browse { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fn-browse--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) { .fn-browse--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fn-browse-heading {
    font-family: var(--fn-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--fn-accent); margin-bottom: 0.9rem;
}
.fn-browse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.fn-browse-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.fn-browse-list a { color: #FFFFFF; text-decoration: none; font-size: 0.9375rem; }
.fn-browse-list a:hover { color: var(--fn-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.fn-browse-count { font-family: var(--fn-mono); font-size: 0.8125rem; color: var(--fn-muted); }

.fn-log-year + .fn-log-year { margin-top: 3.5rem; }
.fn-log-heading {
    font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: #FFFFFF;
    padding-bottom: 0.9rem; margin-bottom: 0.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fn-log { list-style: none; margin: 0; padding: 0; }
.fn-log-row {
    position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.4rem 1.5rem; align-items: baseline;
    padding: 1.1rem 0.5rem 1.1rem 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
@media (min-width: 768px) { .fn-log-row { grid-template-columns: 5rem minmax(0, 1fr) auto; } }
.fn-log-row[class*="fn-tone-"]::before {
    content: ""; position: absolute; left: 0; top: 1.25rem; width: 2px; height: 1.4rem; background: var(--fn-tone); opacity: 0.85;
}
.fn-log-date { font-family: var(--fn-mono); font-size: 0.8125rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fn-muted); }
.fn-log-main { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.fn-log-link { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.3rem; line-height: 1.3; color: #FFFFFF; text-decoration: none; }
.fn-log-link::after { content: ""; position: absolute; inset: 0; }
.fn-log-link:focus-visible { outline: none; }
.fn-log-row:has(.fn-log-link:focus-visible) { outline: 2px solid var(--fn-accent); outline-offset: -2px; }
.fn-log-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; font-family: var(--fn-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fn-muted); }
.fn-log-meta .fn-film-name { font-family: 'Playfair Display', serif; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.fn-log-meta .fn-film-dir { font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em; text-transform: none; font-size: 0.8125rem; margin: 0; }
.fn-log-rating { grid-column: 2; }
@media (min-width: 768px) { .fn-log-rating { grid-column: auto; align-self: center; } }
.fn-log-row:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.025), transparent); }
.fn-log-row:hover .fn-log-link { color: #E5E9F0; }
.fn-empty-message--plain { text-align: center; margin: 2rem 0 3rem; }

@media (max-width: 767px) {
    .fn-browse { padding: 1.5rem 1.25rem; margin-bottom: 3rem; }
    .fn-log-row { padding-left: 0.6rem; }
    .fn-log-link { font-size: 1.15rem; }
}

/* ---------- where it was seen ---------- */

.fn-seen {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-family: var(--fn-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fn-muted);
}
.fn-seen i { color: var(--fn-accent); font-size: 0.95em; }
.fn-slate-grid dd .fn-seen { font-size: 0.8125rem; color: #FFFFFF; margin-top: 0.15rem; }
.fn-film-seen { margin: 0 0 0.5rem; }
.fn-mini-seen { margin: -0.25rem 0 0.7rem; }
.fn-entry-filmline .fn-seen { font-size: 0.6875rem; }