) that still need to look like a headline, so this can't be scoped to the h1-h4 tag selectors alone. Caught via computed-style inspection: a .page-lede was silently rendering in the body font at regular weight, no uppercase, because it only ever matched the font-size rule below, not this one. */ h1, h2, h3, h4, .text-display-1, .text-display-2 { font-family: var( --font-display ); font-weight: 400; /* Anton only ships one weight; heaviness comes from the typeface itself */ text-transform: uppercase; line-height: 0.95; letter-spacing: 0.01em; margin: 0 0 0.4em; } /* Display sizes scale with viewport but stay controlled at both ends. */ h1, .text-display-1 { font-size: clamp( 2.75rem, 8vw, 7rem ); } h2, .text-display-2 { font-size: clamp( 2rem, 5vw, 4rem ); } h3 { font-size: clamp( 1.5rem, 3vw, 2.25rem ); } p { margin: 0 0 1.2em; max-width: 65ch; } /* Opts a paragraph out of the 65ch readability cap above and centers it — for a short opening statement that should use the full content-column width (same edge distance as everything else in .entry-content, just not narrowed to a reading measure) rather than read as a normal left-aligned paragraph. */ .content-wide-centered { max-width: none; text-align: center; } .entry-content, .page-content { font-size: 1.05rem; } blockquote { margin: 0; font-family: var( --font-body ); font-style: italic; font-size: clamp( 1.75rem, 4.5vw, 3rem ); line-height: 1.3; max-width: 22ch; } /* The quote text is a
, which otherwise inherits the global
`p { margin: 0 0 1.2em; }` — at this font-size (up to 3rem) that alone
put 20-36px of empty space between the quote and its , on top of
the cite's own margin-top, reading as too far apart from the quote it's
attributing. */
blockquote p {
margin-bottom: 0;
}
/* ==========================================================================
4. Layout
========================================================================== */
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex: 1;
}
main.site-main {
max-width: var( --content-max );
margin: 0 auto;
padding: 0 24px;
}
/* Breaks an element out of main.site-main's centered, padded max-width box
to span the true viewport width. Written against 50vw rather than the
parent's own (padded) 50% so it holds regardless of the parent's padding
— a translateX(-50%) version was tried first and came up short exactly
because it resolved against the padded parent box, not the viewport. */
.full-bleed {
width: 100vw;
margin-left: calc( 50% - 50vw );
margin-right: calc( 50% - 50vw );
}
/* ==========================================================================
5. Header / nav
========================================================================== */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var( --color-border );
position: fixed; /* also the positioning context for the mobile nav dropdown below */
top: 0;
left: 0;
right: 0;
z-index: 200;
background: var( --color-bg );
transition: background-color 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Toggled by header-scroll.js once the page has scrolled past a small
threshold. Not fully transparent — a see-through white tint (rather than
opacity: 0) so the wordmark/nav stay legible over whatever has scrolled
underneath, including a dark full-bleed photo like the Home hero. */
.site-header.is-scrolled {
background: rgba( 255, 255, 255, 0.82 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border-bottom-color: rgba( 0, 0, 0, 0.08 );
}
/* Front page only (see header.php) — the header starts fully transparent,
floating directly over the hero photo (which is pulled up underneath it,
see .home-hero-photo's negative margin below) instead of pushing the
photo down by its own height. Text flips to white via currentColor
(wordmark and hamburger bars need their own explicit override, since
they set color/background directly rather than inheriting). The
:not(.is-scrolled) guard means this simply stops applying once
header-scroll.js adds that class, falling back to the normal opaque
black-on-white look with no extra reset rules needed. */
.site-header--transparent-hero:not( .is-scrolled ) {
background: transparent;
border-bottom-color: transparent;
color: var( --color-fg-invert );
}
.site-header--transparent-hero:not( .is-scrolled ) .site-wordmark {
color: var( --color-fg-invert );
}
.site-header--transparent-hero:not( .is-scrolled ) .menu-toggle__bar {
background: var( --color-fg-invert );
}
/* Compensates for the header leaving normal document flow (position: fixed
above) — --header-height is measured and kept in sync by
header-scroll.js, not hardcoded, since the header's own height already
changes between the desktop nav and the mobile hamburger layouts. */
.site-content {
padding-top: var( --header-height, 76px );
}
.site-wordmark {
font-family: var( --font-display );
font-size: 2.5rem; /* fixed, not fluid — stays put as the window resizes instead of shrinking/shifting */
text-decoration: none;
color: var( --color-fg );
letter-spacing: 0.02em;
margin-left: 16px;
flex-shrink: 0; /* never gets squeezed by the nav before the hamburger breakpoint kicks in */
}
.site-wordmark__pipe {
display: inline-block;
margin: 0 0.15em;
}
.main-navigation {
display: flex;
align-items: center;
gap: 32px;
flex-shrink: 0; /* never gets squeezed narrower than its content needs */
}
/* Desktop: lays its two children (menu, language switcher) out exactly like
.main-navigation used to before the button was split out into a sibling —
see header.php and the mobile media query below for why. */
.nav-dropdown {
display: flex;
align-items: center;
gap: 32px;
flex-shrink: 0;
}
.main-navigation ul {
display: flex;
gap: 28px;
}
.main-navigation a {
text-decoration: none;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.05em;
white-space: nowrap; /* without this, a flex item can shrink by wrapping its text
mid-label instead of holding its natural width — "O nas" splitting into "O" /
"NAS" partway through a resize was exactly that */
}
.main-navigation a:hover,
.main-navigation a:focus {
text-decoration: underline;
}
/* wp_nav_menu adds these classes itself by comparing each item's URL
against the current request — no PHP needed on our end, just styling
the state it already flags. */
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a,
.main-navigation .current_page_ancestor > a {
text-decoration: underline;
}
.language-switcher {
display: flex;
gap: 10px;
font-size: 0.8rem;
font-weight: 600;
}
.language-switcher .is-current {
text-decoration: underline;
}
.menu-toggle {
display: none;
background: none;
border: none;
padding: 4px;
flex-direction: column;
gap: 5px;
}
.menu-toggle__bar {
width: 24px;
height: 2px;
background: var( --color-fg );
}
/* Measured: the wordmark + full PL nav need ~1012px combined before they'd
touch at all (243px wordmark + 721px nav + 48px header padding, both now
flex-shrink: 0 so neither gives ground). 1060px lets the first link sit
close to the wordmark — a real but modest ~48px gap — before the switch
to the hamburger, rather than collapsing while there's still plenty of
unused space. */
@media ( max-width: 1060px ) {
.menu-toggle {
display: flex;
}
/* .nav-dropdown is a wrapper around the links + language switcher,
separate from the toggle button itself (see header.php) — that way
the button stays fixed in the header and only this panel animates.
Always laid out (position: absolute, flex) so opacity/transform can
transition smoothly; display:none couldn't animate at all, and
toggling it on the button's own container used to drag the button
into the dropdown along with everything else. visibility keeps it
out of tab order and unclickable while closed, same as display:none
would, just with the timing pushed to the end of the transition. */
.nav-dropdown {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
position: absolute;
top: 100%;
right: 0;
background: var( --color-bg );
border: 1px solid var( --color-border );
padding: 20px;
z-index: 100;
opacity: 0;
visibility: hidden;
transform: translateY( -8px );
/* On the homepage before scrolling, .site-header--transparent-hero
flips the WHOLE header's text to white (for contrast over the hero
photo — see that rule above), which .main-navigation a inherits
since it sets no color of its own. This panel always has its own
solid white background once open, though, regardless of that hero
state — without resetting color back here, the links render white
text on a white box: technically present, invisible. */
color: var( --color-fg );
}
.nav-dropdown ul,
.nav-dropdown .language-switcher {
display: flex;
flex-direction: column;
gap: 14px;
}
.main-navigation.is-open .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY( 0 );
}
/*
* .js-nav-animate is added by navigation.js only inside the click
* handler — never on page load, never on a plain resize. Without that
* gate, the opacity/transform above would still transition the FIRST
* time this media query itself starts matching (crossing the breakpoint
* while resizing flips the dropdown from its implicit desktop "visible,
* no transform" state to this closed state in one style recalc),
* producing a stray quick fade/slide flash at the exact moment the
* layout switches to the hamburger — even though nobody had clicked
* anything yet. Scoping the transition to a click-only class keeps that
* switch instant and reserves the animation for deliberate opens/closes.
*/
.main-navigation.js-nav-animate .nav-dropdown {
transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}
}
/* ==========================================================================
6. Footer
========================================================================== */
.site-footer {
border-top: 1px solid var( --color-border );
padding: 40px 24px;
margin-top: 80px;
}
.footer-primary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
max-width: var( --content-max );
margin: 0 auto 30px;
}
.footer-contact {
display: flex;
gap: 24px;
}
.footer-contact a {
text-decoration: none;
}
.footer-social {
display: flex;
gap: 20px;
/* .footer-primary's space-between otherwise pushes this flush to the
content box's own right edge — small icons read as cramped there
in a way the old text labels didn't. */
margin-right: 12px;
}
.footer-social__link {
display: inline-flex;
text-decoration: none;
opacity: 0.75;
transition: opacity 0.15s ease;
}
.footer-social__link svg {
width: 28px;
height: 28px;
}
.footer-social__link:hover {
opacity: 1;
}
.footer-partners {
max-width: var( --content-max );
margin: 0 auto 30px;
border-top: 1px solid var( --color-border );
padding-top: 24px;
}
.footer-partners__label {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.08em;
color: var( --color-muted );
margin-bottom: 12px;
}
/* Logos and the funding notice are all direct items of ONE flex-wrap
row (not a logos sub-block sitting beside the notice as two rigid
units) — deliberately, after that two-unit version produced a bad
case: at some widths the 6 logos alone wrapped to 2 lines (5 + 1),
leaving a lone 6th logo with a huge stretch of empty space beside it
on its own line, while the notice — unable to peek into that gap
since it could only sit beside the logos block as a whole — dropped
below everything onto a 3rd line instead. Flattening lets normal
flex-wrap line-packing place the notice whichever line actually has
room, including right after a trailing lone logo. */
.footer-partners__row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 24px;
}
.footer-partners__logo {
max-height: 72px;
width: auto;
flex-shrink: 0;
}
.footer-partners__notice {
flex: 1 1 360px;
min-width: 360px;
max-width: 480px;
padding: 0.85rem 1.1rem;
border: 1px solid var( --color-border );
font-size: 0.75rem;
line-height: 1.5;
color: var( --color-muted );
/* An actual bordered box, not a text-align-last: justify effect —
forcing every line (including the last) flush turned out to be
fragile: whenever the last line only had a couple of words (as
happened with the English translation), the browser stretched
huge gaps between them to fill the width. A visible border gives
the "boxed" look reliably regardless of language or line count,
while the text inside justifies normally (ragged last line, as
usual — barely noticeable next to a border).
Sitting next to the logos is the actual requirement (see
.footer-partners__row below) — an earlier attempt pinned
min-width to max-width to force exactly two lines, but the six
logos leave only ~460px of leftover row space even at full
content width (1200px), and flex-wrap won't shrink an item below
its min-width — it pushes the whole item to its own row instead.
With min-width pinned to a fixed ~480px, that leftover was never
enough, so the box dropped below the logos on every realistic
screen width — the opposite of what was asked for. flex-basis is
set equal to min-width (rather than something larger) so the box
joins the row as soon as there's room for it at its smallest, and
then grows into whatever space is actually left, up to max-width.
360px floor is deliberate, not arbitrary: below it the text
degrades past 3 lines into a cramped 5-6 line column once space
gets tight, which reads as broken rather than boxed — better to
fall back to its own full-width row (still 2 lines there, just
not beside the logos) than let it get that narrow. The border
keeps it reading as "boxed" whether the shared-row result is two
lines or three. hyphens stays off so any wrapping happens at
whole word boundaries. */
text-align: justify;
text-justify: inter-word;
hyphens: none;
}
/* Phones: the six logos sit in a fixed 3 x 2 grid (two tidy rows, one
under the other) instead of free-wrapping into whatever 4+2 / 5+1
split the width happens to allow, and the notice gets its own full-
width row underneath. Logos scale down to their column rather than
overflowing it. */
@media ( max-width: 640px ) {
.footer-partners__row {
display: grid;
grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
gap: 20px 16px;
align-items: center;
}
.footer-partners__logo {
max-height: 56px;
max-width: 100%;
justify-self: center;
}
.footer-partners__notice {
grid-column: 1 / -1;
min-width: 0;
max-width: 100%;
}
}
.site-info {
max-width: var( --content-max );
margin: 0 auto;
font-size: 0.8rem;
color: var( --color-muted );
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 8px 24px;
}
.footer-legal {
display: flex;
gap: 16px;
}
.footer-legal a {
color: var( --color-muted );
}
/* ==========================================================================
7. Photography — original color, site-wide (reversed from the initial
monochrome-everywhere brief; partner/funder logos in the footer keep
their own separate desaturation below, which is a different design
decision — brand-logo consistency, not photo treatment).
========================================================================== */
/* ==========================================================================
8. Buttons / links
========================================================================== */
.button,
.contact-form-submit {
display: inline-block;
background: var( --color-bg-invert );
color: var( --color-fg-invert );
border: 1px solid var( --color-border );
text-transform: uppercase;
font-weight: 600;
letter-spacing: 0.05em;
font-size: 0.85rem;
padding: 14px 28px;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.button:hover,
.contact-form-submit:hover {
background: var( --color-bg );
color: var( --color-fg );
}
.button--outline {
background: transparent;
color: var( --color-fg );
}
.button--outline:hover {
background: var( --color-bg-invert );
color: var( --color-fg-invert );
}
/* ==========================================================================
9. Contact page — a single two-column row: the display-type opener,
lede, and email/phone stacked on the left; the form on the right,
starting at the same top as "Let's talk." itself (align-items: start
on one shared grid, rather than the intro sitting in its own
full-width block above a second row). Inputs are underline-only
rather than boxed, closer to the editorial feel of the rest of the
site than a generic web form.
========================================================================== */
.contact-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: start;
margin: 56px 0 80px;
}
.contact-intro__lede {
max-width: 46ch;
margin-top: 16px;
font-size: 1.1rem;
color: var( --color-muted );
}
.contact-layout__details {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 40px;
}
.contact-layout__detail {
display: block;
font-family: var( --font-display );
text-transform: uppercase;
font-size: clamp( 1.25rem, 2.5vw, 1.75rem );
letter-spacing: 0.01em;
text-decoration: none;
color: var( --color-fg );
border-bottom: 1px solid var( --color-border );
padding-bottom: 16px;
transition: opacity 0.15s ease;
}
.contact-layout__detail:hover {
opacity: 0.6;
}
@media ( max-width: 780px ) {
.contact-layout {
grid-template-columns: 1fr;
gap: 48px;
}
}
.contact-form-honeypot {
position: absolute;
left: -9999px;
}
.contact-form-field {
margin-bottom: 26px;
}
/* The message field's own underline lands on the same line as the one
under the phone number on the left column — but the label above it
keeps the normal 26px gap from the email field (same as every other
field-to-field gap). The textarea itself grows taller (136px vs. the
default 99px) to make up the 37px difference, instead of pushing the
label down with it. */
.contact-form-field--message textarea {
height: 136px;
}
.contact-form-field label {
display: block;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
.contact-form-field input,
.contact-form-field textarea {
width: 100%;
border: none;
border-bottom: 1px solid var( --color-border );
background: transparent;
color: var( --color-fg );
font-family: var( --font-body );
font-size: 1.05rem;
padding: 10px 0;
transition: border-color 0.2s ease;
}
.contact-form-field input:focus,
.contact-form-field textarea:focus {
border-bottom-color: var( --color-fg );
outline: none;
}
.contact-form-required {
color: var( --color-muted );
text-transform: none;
font-size: 0.75rem;
}
.contact-form-status {
padding: 14px;
border: 1px solid var( --color-border );
margin-bottom: 20px;
}
/* ==========================================================================
10. Utility
========================================================================== */
.page-header {
margin: 60px 0 40px;
}
/* letter-spacing is computed and applied by assets/text-stretch.js — nowrap
keeps it a single line the calculation can measure/stretch correctly. */
.js-stretch-text {
white-space: nowrap;
}
/* Musicians page: the title sits directly above the photo (normal
flow, fully visible on its own — not layered over the image), with
the gap between them tightened so it reads as sitting right at the
photo's edge rather than floating with a lot of space beneath it.
Top margin matches .page-header's convention so the title clears
the header by the same breathing room as elsewhere on the site. */
.musicians-hero-title {
margin: 60px 0 16px;
}
.musicians-hero-page .content-photo {
margin-top: 0;
}
/* ==========================================================================
11. Home
========================================================================== */
.home-hero {
padding: 64px 0 32px;
}
.home-hero__lede {
margin: 0;
max-width: 16ch;
}
/* The full-page hero photo, with the Harnoncourt quote centered on top of
it. The photo itself keeps the site's standard monochrome filter (see
section 7); a dark scrim sits between photo and text purely for
contrast, independent of any one photo's own tones.
Negative top margin cancels out .site-content's padding-top (added to
compensate for the header's own position: fixed) so the photo starts at
the true top of the page, y=0, running underneath the header rather
than being pushed down by it — the header goes transparent over it
instead (see .site-header--transparent-hero above). Every other page
still gets pushed down normally; only this section fights its way back
up past that padding. */
.home-hero-photo {
position: relative;
width: 100%;
height: 100vh;
/* No bottom margin: the CTA button already lives inside the photo's
own overlay (see .home-hero-photo__cta) whenever there's a photo,
so .home-main renders completely empty right after this — the
48px this used to carry was just adding dead space on top of
.site-footer's own 80px margin-top, not separating this from any
actual content. */
margin: calc( -1 * var( --header-height, 105px ) ) 0 0;
}
.home-hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
/* Biases the crop down from dead-center so a lighter-toned top edge on
some photos (e.g. a venue's archway/ceiling) doesn't sit right under
the header reading as a seam — there's no actual layout gap between
header and photo (verified: 0px), this is purely about which part of
the image is visible at that edge. */
object-position: center 30%;
}
.home-hero-photo__overlay {
position: absolute;
inset: 0;
display: flex;
align-items: flex-start; /* quote sits near the top of the photo, not dead center vertically */
justify-content: center; /* stays horizontally centered */
text-align: center;
/* The photo (and this overlay with it) now starts at the true top of
the page rather than below the header — see .home-hero-photo's
negative margin — so top padding has to clear the transparent
header's own height first, then a bit of breathing room below it
(nudged down from 6vh to 2vh), or the quote would start underneath
the header's text. */
padding: calc( var( --header-height, 105px ) + 2vh ) 24px 24px;
background: linear-gradient( rgba( 0, 0, 0, 0.35 ), rgba( 0, 0, 0, 0.45 ) );
}
.home-hero-photo__overlay blockquote {
max-width: 26ch;
color: var( --color-fg-invert );
}
/* Polish runs longer than English for the same quote — give it more
horizontal measure instead of wrapping into extra narrow lines; it
stays centered via the overlay's own justify-content: center. */
.home-hero-photo__overlay blockquote.quote--wide {
max-width: 40ch;
}
.home-hero-photo__overlay cite {
display: block;
margin-top: 20px;
font-style: normal;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: rgba( 255, 255, 255, 0.75 );
}
/* CTA buttons sit near the photo's bottom edge — centered horizontally
(inherited from .home-cta), pinned to the bottom rather than the
vertical center. */
.home-hero-photo__cta {
position: absolute;
left: 0;
right: 0;
bottom: 64px;
}
/* Two classes beats .home-cta's own `padding: 0 0 80px` regardless of
source order — that padding was sized for trailing space before the
footer in normal flow, meaningless once this sits absolutely positioned
over the photo. */
.home-cta.home-hero-photo__cta {
padding: 0 24px;
}
/* Overrides .button's own solid invert fill — a see-through white
frosted-glass fill with a blur behind it instead, so it stays legible
over any part of the photo without going fully opaque. Bigger and
bumped up in opacity compared to the two-button version this replaced,
since it's now the only, and therefore the more deliberate, CTA — needs
to read clearly on its own rather than as half of a pair. Hover
brightens the fill further and lifts the button slightly. */
.home-hero-photo__cta .button {
background: rgba( 255, 255, 255, 0.88 );
color: var( --color-fg );
border-color: rgba( 255, 255, 255, 0.95 );
backdrop-filter: blur( 8px );
-webkit-backdrop-filter: blur( 8px );
font-size: 1.05rem;
padding: 18px 36px;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.home-hero-photo__cta .button:hover {
background: rgba( 255, 255, 255, 1 );
transform: translateY( -3px );
box-shadow: 0 10px 24px rgba( 0, 0, 0, 0.3 );
}
/* Fallback for before a photo is uploaded: quote sits in the normal flow
instead of overlaid. */
.home-quote {
max-width: var( --content-max );
margin: 0 auto 48px;
padding: 64px 24px 0;
text-align: center;
}
.home-quote blockquote {
margin: 0 auto;
}
.home-hero + .home-quote {
padding-top: 0;
}
.home-quote cite {
display: block;
margin-top: 24px;
font-style: normal;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var( --color-muted );
}
.home-content {
max-width: var( --content-max );
margin: 0 auto 48px;
padding: 0 24px;
}
.home-cta {
display: flex;
justify-content: center;
gap: 20px;
padding: 0 0 80px;
}
/* ==========================================================================
12. Philosophy / long-form pages
========================================================================== */
.page-lede {
max-width: 26ch;
margin: 0 0 40px;
/* Longer ledes wrap to several lines at this size — the base 0.95
line-height (tuned for a short 1-2 line headline) was tight enough to
make descenders/ogonki collide with the line below on a wrap this
deep. */
line-height: 1.08;
}
/* ==========================================================================
13. Content photos — reusable anywhere inside .entry-content/.page-content
(long-form pages: Philosophy now, About/Gallery/etc. later). Two sizes
(full column width, and a same-row pair) for pacing rather than a wall
of text; deliberately block-level and never floated so images sit
cleanly between paragraphs with generous margin instead of any risk of
text wrapping around/overlapping them. Swap the placeholder box below
for a real (drop the .content-photo__placeholder div and its
figcaption stays) once photos exist — .content-photo/-wide/-pair keep
working the same way with a real image inside.
========================================================================== */
.content-photo {
margin: 56px 0;
}
.content-photo__placeholder {
aspect-ratio: 16 / 10;
border: 1px dashed var( --color-border );
display: flex;
align-items: center;
justify-content: center;
color: var( --color-muted );
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-align: center;
padding: 24px;
}
/* A real photo dropped into a standalone .content-photo (not inside a
.content-media-row) fills the same box the placeholder used, cropped
via object-fit rather than distorted. */
.content-photo img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
/* Matches this specific photo's own native ratio (2560×1139, a wide
cinematic crop) instead of forcing it into the default 16:10 box,
which would have cropped a meaningful amount off the sides. */
.content-photo--wide img {
aspect-ratio: 2560 / 1139;
}
.content-photo-row {
display: flex;
gap: 24px;
margin: 56px 0;
}
.content-photo-row .content-photo {
flex: 1 1 0;
margin: 0;
}
.content-photo-row .content-photo__placeholder {
aspect-ratio: 4 / 5;
}
/* Portrait/vertical variant — e.g. alongside the Philosophy page's lede,
where a tall image reads better next to a few short lines of huge type
than the default landscape ratio would. */
.content-photo__placeholder--tall {
aspect-ratio: 3 / 4;
}
@media ( max-width: 640px ) {
.content-photo-row {
flex-direction: column;
}
}
/* Text-beside-image rows: uses the full content width as a two-column
grid, one column of prose and one placeholder/image, side by side.
Which side the image falls on is controlled purely by DOM order in the
markup (media
/