` blocks emitted
by page-films.php — each film entry. Without display:contents the
iframes inside get trapped at the section's natural width and
legacy width="940" attributes overflow narrow viewports. */
.Main > article:not(.Archive-item),
.Main > section.Film { display: contents; }
.Main > *,
.Main > article > *,
.Main > section.Film > * { grid-column: main; }
/* Bleed: the canonical Tyler Sticka responsive pattern.
Default (narrow): bleeding content is FULL-BLEED both sides.
Wide (>=60em): bleeding content is HALF-BLEED (text-col-start
to right page edge) so a small text column
can sit beside it.
Bleeding content includes: figures (single posts and archives),
wpautop-wrapped images, iframes (bare or wrapped), and the
ProjectCard image at narrow widths. The wide-viewport switch is
declared once at the bottom of this file for ALL these classes
together, so the rule never gets out of sync. */
.Main > figure,
.Main > article > figure,
.Main > section.Film > figure { grid-column: full-start / full-end; }
.Main > * + *,
.Main > article > * + *,
.Main > section.Film > * + * { margin-top: var(--rhythm); }
/* More breathing room around figures and embedded media */
.Main > figure,
.Main > article > figure,
.Main > section.Film > figure,
.Main > article > p:has(> img:only-child),
.Main > section.Film > p:has(> img:only-child),
.Main > article > p:has(> a:only-child > img:only-child),
.Main > section.Film > p:has(> a:only-child > img:only-child),
.Main > article > p:has(> iframe),
.Main > section.Film > p:has(> iframe),
.Main > article > div:has(> iframe),
.Main > section.Film > div:has(> iframe) {
margin-block: calc(var(--rhythm) * 2);
}
/* -- Captioned figures -------------------------------------------------
Tyler Sticka's named-column pattern, two-state responsive:
- Narrow (< 60em): image full-bleed BOTH sides; caption tucks
underneath in the main text column.
- Wide (≥ 60em): image half-bleed (text-col → right page edge);
caption tucks into the left gutter, bottom-aligned with the image.
Implementation note: figure uses `grid-template-columns: subgrid`
so it adopts .Main's column tracks AND its named lines (full-start,
main-start, main-end, full-end). Without subgrid, the named lines
aren't defined inside the figure (article uses display:contents,
which means CSS inheritance pulls from article — none — not from
.Main) and the layout collapses with caption overlapping image. */
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) {
display: grid;
grid-column: full-start / full-end;
grid-template-columns: subgrid;
margin-block: calc(var(--rhythm) * 2);
}
/* Narrow viewport: image full-bleed both sides, caption in main col
on the row below. Sequential row flow handles the stacking. */
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > img,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > a,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > div,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > iframe,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > video { grid-column: full-start / full-end; }
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > figcaption { grid-column: main; }
/* Wide viewport: side-by-side. Image on right (text-col → page edge),
caption tucked into left gutter, bottom-aligned with the image. */
@media (min-width: 60em) {
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) {
align-items: end;
}
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > img,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > a,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > div,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > iframe,
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > video {
grid-column: main-start / full-end;
grid-row: 1;
}
:is(.Main, .Main > article, .Main > section.Film) > figure:has(> figcaption) > figcaption {
grid-column: full-start / main-start;
grid-row: 1;
padding-inline: 1em;
align-self: end;
text-align: right;
}
}
/* -- Image sizing ----------------------------------------------------- */
:is(.Main, .Main > article, .Main > section.Film) > figure img,
:is(.Main, .Main > article, .Main > section.Film) > figure video,
:is(.Main, .Main > article, .Main > section.Film) > p img { width: 100%; height: auto; display: block; }
:is(.Main, .Main > article, .Main > section.Film) > figure > div { width: 100%; }
/* wpautop wraps standalone images in — full-bleed at narrow,
half-bleed at wide via the responsive switch at the bottom. */
:is(.Main, .Main > article, .Main > section.Film) > p:has(> img:only-child),
:is(.Main, .Main > article, .Main > section.Film) > p:has(> a:only-child > img:only-child) {
grid-column: full-start / full-end;
margin-inline: 0;
}
/* Image-only link styling already declared in the Links section (~line 195). */
/* -- Video iframes ----------------------------------------------------
Goal: every video right-bleeds (text-column-start to right page edge)
regardless of how it was embedded. iframes get a paper background so
they never flash white before the player loads. Native aspect ratio
is respected when an explicit padding-wrapper is present (Vimeo's
responsive embed encodes the ratio in the wrapper's padding-bottom);
otherwise we default to 16:9. */
iframe { background: var(--paper); color-scheme: dark light; }
/* Bare iframe (no wrapper): full-bleed at narrow, half-bleed at
wide (via the responsive switch at the bottom of this file). */
:is(.Main, .Main > article, .Main > section.Film) > iframe {
display: block;
grid-column: full-start / full-end;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
border: 0;
}
/* Iframe inside
(wpautop wraps embeds): bleed the
. */
:is(.Main, .Main > article, .Main > section.Film) > p:has(> iframe:only-child) {
grid-column: full-start / full-end;
margin-inline: 0;
}
:is(.Main, .Main > article, .Main > section.Film) > p > iframe {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
border: 0;
}
/* Iframe inside Vimeo's responsive padding wrapper: respect the
wrapper's aspect ratio (encoded as padding-bottom percentage).
Bleed the wrapper. Don't touch the iframe's positioning —
it's correctly absolute-filled inside the wrapper. */
:is(.Main, .Main > article, .Main > section.Film) > div[style*="padding"][style*="position"],
:is(.Main, .Main > article, .Main > section.Film) > figure > div[style*="padding"][style*="position"] {
grid-column: full-start / full-end;
margin-inline: 0;
width: 100%;
}
/* Captioned figures wrapping a padding-box: figure handles the
right-bleed via the captioned-figure rules above. The padding
wrapper inside fills the figure's image cell at the natural ratio. */
:is(.Main, .Main > article, .Main > section.Film) > figure > div[style*="padding"][style*="position"] > iframe {
border: 0;
}
/* Loose