/* The Film Keep - typography layer
 * Implements Brandy's fonts.json. Loaded on every page, sitewide, so the
 * theme's own headings obey the brand too, not only the film templates.
 *
 * Load order note: this is enqueued at priority 20 so it lands AFTER the
 * theme's global stylesheet and can win on the element selectors below
 * without a single !important.
 */

/* ---------------------------------------------------------------------------
 * 1. The axis correction. This is the whole ballgame for Fraunces.
 *
 *    WONK defaults to 1 and opsz defaults to 9. Every Fraunces headline on
 *    this site was rendering at optical size 9 with the swashy alternates on.
 *    'WONK' 0 cuts the swash off the g, y and italic forms, which is where the
 *    "cute" lives. 'SOFT' 0 sharpens the terminals so the letters read cut
 *    rather than molded, which is the keystone idea in the identity.
 *    font-optical-sizing:auto binds opsz to the size actually being rendered,
 *    so a 72px masthead and a 20px card title stop sharing one drawing.
 * ------------------------------------------------------------------------- */
:root {
	--rff-display: Fraunces, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
	--rff-body: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--rff-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
}

h1, h2, h3, h4,
.rff-title, .rff-shell h1, .rff-filmmeta h1, .rff-more h2,
.rff-shead h2, .rff-coll-m h3, .wp-block-post-title, .wp-block-site-title,
.rff-wall-title, .rff-vault h1, .rff-card[data-untitled] .rff-cat {
	font-family: var(--rff-display);
	font-variation-settings: 'SOFT' 0, 'WONK' 0;
	font-optical-sizing: auto;
	font-synthesis-weight: none;
}

/* ---------------------------------------------------------------------------
 * 2. Optical tracking. Fraunces spaces itself for text sizes, so large display
 *    set at its natural tracking looks loose and amateur. This is the single
 *    most common way a good serif is made to look cheap. Negative tracking
 *    scales with size; at 20-31px it goes to zero.
 * ------------------------------------------------------------------------- */
.rff-shell h1, .rff-filmmeta h1, .wp-block-post-title { letter-spacing: -0.02em; }
.rff-more h2, .rff-shead h2, h2 { letter-spacing: -0.015em; }
.rff-title, .rff-coll-m h3, h3 { letter-spacing: 0; }

/* Sentence case is a brand rule. All-caps old-style serif is the visual
 * language of law firms and wine labels, which is the lane the identity
 * explicitly rules out. Nothing in Fraunces gets uppercased. */
h1, h2, h3, .rff-title { text-transform: none; }

/* ---------------------------------------------------------------------------
 * 3. Inter, with its features actually switched on.
 *
 *    tnum is not a nicety here. The most repeated text on this entire site is
 *    dates and runtimes, and proportional figures make a column of them jitter
 *    left and right by a pixel or two per row. At 12 cards across a viewport
 *    that reads as sloppiness, and sloppiness is what costs an archive its
 *    credibility.
 *
 *    cv05 gives lowercase l a tail so l, I and 1 stop being the same shape,
 *    which matters in client names and film titles.
 *    ss03 softens the single-storey forms just enough to sit beside a warm
 *    serif instead of reading as a tech-product UI.
 * ------------------------------------------------------------------------- */
body, .rff, .rff-shell, .rff-sub, .rff-lede, .rff-meta, button, input, select {
	font-family: var(--rff-body);
	font-feature-settings: 'tnum' 1, 'cv05' 1, 'ss03' 1;
	font-synthesis-weight: none;
}

/* Anything a visitor might compare against another value gets tabular figures
 * unconditionally, even where it inherits a different family. */
.rff-dur, .rff-count, .rff-meta, .rff-year, .rff-vault-tally,
.rff-wall-time, time, .rff-filmmeta .rff-meta {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
 * 4. Mono, for machine-truthful values only. Never prose.
 *
 *    Slashed zero is the point. On a page full of 00:04:31 the difference
 *    between a slashed zero and a capital O is the difference between reading
 *    a spec and reading a guess. Mono also runs optically larger than a sans
 *    at the same nominal size, so it is set one step smaller than the
 *    metadata it sits beside.
 * ------------------------------------------------------------------------- */
.rff-dur, .rffp-time, .rff-wall-time, .rff-tc, code, kbd, pre {
	font-family: var(--rff-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: 'zero' 1;
}

.rff-dur {
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: 0.01em;
}

.rffp-time { font-size: 14px; }

/* The active timecode sits at 500 so the current position is distinguishable
 * from the total runtime at a glance, without a color change. */
.rffp-time-current { font-weight: 500; }

/* ---------------------------------------------------------------------------
 * 5. Weight discipline. Fraunces defaults to 900 because that is the top of
 *    its wght range, so any element that does not state a weight renders
 *    black. Every display element states one.
 *
 *    400 for large display (40px+): at masthead sizes 400 has plenty of
 *    presence and 600 gets shouty. 600 for small display (20-32px): below
 *    32px, 400 loses authority. That crossover is why these are split.
 * ------------------------------------------------------------------------- */
.rff-shell h1, .rff-filmmeta h1 { font-weight: 400; }
.rff-title, .rff-coll-m h3, .rff-shead h2, .rff-more h2 { font-weight: 600; }

/* The old CSS asked for weight 300 on the H1, which Fraunces does have but
 * which reads thin and fashion-magazine rather than archival. 400 is the
 * brand value. Stated here so the earlier declaration cannot win by order. */
.rff-shell h1 { font-weight: 400; }

/* ---------------------------------------------------------------------------
 * 6. Body sizing. 17px, not 16px.
 *
 *    16px is the web default, which is to say it is not a decision. The
 *    primary avatar in the audience file is 58 and reads on a phone in a
 *    parked car. The audience argues for the extra point.
 * ------------------------------------------------------------------------- */
body { font-size: 17px; line-height: 1.65; }
.rff-lede { line-height: 1.6; }
.rff-sub { font-weight: 400; }

/* Spanish is a first-class language on this site. Quinceanera and wedding
 * titles carry tildes and accented vowels constantly, and a broken glyph in
 * a family's own surname is the most brand-damaging typo possible here. The
 * latin-ext subset is loaded for exactly this and must never be dropped to
 * save bytes. */

/* ---------------------------------------------------------------------------
 * 7. LQIP fade-up.
 *
 *    The frame carries a 32x18 WebP blur of its own poster as a background,
 *    decoded once from Bunny's BlurHash and inlined as a data URI. The real
 *    poster starts transparent and fades over it, so a grid assembles itself
 *    instead of flickering, and a film that is still encoding shows a
 *    plausible blur rather than a black rectangle.
 *
 *    is-loaded is set by films.js. The :not() guard means that if the script
 *    fails to run for any reason, images stay VISIBLE rather than invisible.
 *    A broken enhancement must never be able to hide the content.
 * ------------------------------------------------------------------------- */
.rff-frame {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.rff-js .rff-frame img {
	opacity: 0;
	transition: opacity .45s cubic-bezier(.2, .6, .2, 1);
}

.rff-js .rff-frame img.is-loaded { opacity: 1; }

/* The mosaic tiles stack poster over blur in one background-image, so they
 * need no JS at all. Cover + center on both layers. */
.rff-mos i {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (prefers-reduced-motion: reduce) {
	.rff-js .rff-frame img { transition: none; }
}