/*
Theme Name: Field Creative
Theme URI: https://fieldstudio.xyz
Author: Field Creative Ltd
Description: Studio site for Field Creative. Work as a quiet list (client, project, year); hovering a row brings up its frame. Projects hold any number of Vimeo films, played in place. One typeface, two sizes. Includes an importer seeded from vimeo.com/jamiwilliam5.
Version: 1.3.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: field-creative
*/

/* ---------- Tokens ---------- */
:root {
	--paper: #ebe9e3;
	--paper-deep: #dfdcd4;
	--ink: #1c1b19;
	--mute: #8a867d;
	--rule: rgba(28, 27, 25, 0.1);
	--serif: "Newsreader", "Iowan Old Style", Georgia, serif;
	--size: 17px;       /* everything */
	--size-s: 14px;     /* captions, footer */
	--lh: 1.5;
	--gutter: clamp(16px, 3vw, 40px);
	--measure: 36rem;
	--gap: clamp(56px, 10vh, 120px);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--serif);
	font-size: var(--size);
	line-height: var(--lh);
	font-weight: 400;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s; }
a:focus-visible, button:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--ink); color: var(--paper); }

.fc-muted, .fc-label { color: var(--mute); }
.fc-label { display: block; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.fc-skip { position: absolute; left: -9999px; }
.fc-skip:focus { left: var(--gutter); top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: 4px 8px; }

/* ---------- Header ---------- */
.fc-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 16px var(--gutter);
	background: var(--paper);
}
.fc-nav__list { list-style: none; display: flex; gap: 1.25em; margin: 0; padding: 0; }
.fc-nav a { color: var(--mute); }
.fc-nav a:hover, .fc-nav .current-menu-item > a { color: var(--ink); }

.fc-main { padding: 0 var(--gutter) 1px; min-height: 70vh; }

/* ---------- Home ---------- */
.fc-intro {
	max-width: 19ch;
	margin: var(--gap) 0 calc(var(--gap) * 0.8);
	font-size: clamp(30px, 3.9vw, 58px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.fc-list { list-style: none; margin: 0 0 var(--gap); padding: 0; border-bottom: 1px solid var(--rule); }
.fc-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 5.5rem;
	column-gap: 1.5rem;
	align-items: baseline;
	padding: 0.45rem 0;
	border-top: 1px solid var(--rule);
}
.fc-row__title, .fc-row__year { color: var(--mute); transition: color 0.2s; }
.fc-row__year { text-align: right; font-variant-numeric: tabular-nums; }
.fc-row:hover, .fc-row:hover .fc-row__title, .fc-row:hover .fc-row__year { color: var(--ink); }

/* Floating frame (pointer devices only). */
.fc-frame {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	width: min(24vw, 400px);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
	will-change: transform, opacity;
}
.fc-frame.is-on { opacity: 1; }
.fc-frame img { position: relative; z-index: 1; display: block; width: 100%; height: auto; background: var(--paper-deep); }
@media (hover: none), (max-width: 760px) { .fc-frame { display: none; } }

/* ---------- Project ---------- */
.fc-project__head { margin: 24px 0 var(--gap); }
.fc-back { display: inline-block; color: var(--mute); margin-bottom: calc(var(--gap) * 0.6); }
.fc-back:hover { color: var(--ink); }
.fc-project__client, .fc-project__name { display: block; }
.fc-project__client + .fc-project__name { color: var(--mute); }
.fc-project__meta { color: var(--mute); margin-top: 0.75em; }
.fc-project__lede { max-width: var(--measure); margin-top: 1.5em; }

.fc-films { display: grid; gap: var(--gap); }
.fc-film { width: 100%; max-width: 1680px; justify-self: center; }
.fc-film--portrait { max-width: 440px; }
@media (min-width: 761px) {
	.fc-films--many { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: calc(var(--gap) * 0.7); }
	.fc-films--many .fc-film:first-child { grid-column: 1 / -1; }
}
.fc-film__frame { position: relative; width: 100%; background: var(--paper-deep); overflow: hidden; }
.fc-film__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-film__poster { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fc-film__poster img { width: 100%; height: 100%; object-fit: cover; transition: filter 0.4s var(--ease); }
.fc-film__poster:hover img { filter: brightness(0.88); }
.fc-film__play {
	position: absolute;
	left: 16px;
	bottom: 12px;
	font-size: var(--size-s);
	color: #fff;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}
.fc-film__poster:hover .fc-film__play, .fc-film__poster:focus-visible .fc-film__play { opacity: 1; }
@media (hover: none) { .fc-film__play { opacity: 1; } }
.fc-film__caption { display: flex; justify-content: space-between; gap: 1em; margin-top: 0.6em; font-size: var(--size-s); color: var(--mute); }
.fc-film__title { color: var(--ink); }

.fc-project__notes { max-width: var(--measure); margin-top: var(--gap); }
.fc-project__notes .fc-label { margin-bottom: 0.5em; }

.fc-next { margin: var(--gap) 0; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
.fc-next .fc-label { display: inline; margin-right: 0.75em; }
.fc-next__link .fc-row__title { margin-left: 0.35em; }
.fc-next__link:hover .fc-row__title { color: var(--ink); }

/* ---------- Pages ---------- */
.fc-page { margin: var(--gap) 0; max-width: var(--measure); }
.fc-page__title { margin-bottom: 1.5em; }
.fc-page .fc-label { margin-bottom: 1.5em; }
.fc-prose p, .fc-page > p { margin-bottom: 1.5em; }
.fc-prose a, .fc-page > p a, .fc-director a { border-bottom: 1px solid var(--rule); }
.fc-prose a:hover, .fc-page > p a:hover, .fc-director a:hover { border-color: var(--ink); }
.fc-prose h2, .fc-prose h3 { color: var(--mute); margin: 0; }

/* Studio: reel full width, everything else in one column. */
.fc-studio { max-width: none; margin-top: 24px; }
.fc-studio__reel { margin-bottom: var(--gap); }
.fc-studio__body, .fc-clients, .fc-director { max-width: var(--measure); }
.fc-studio__body > p:first-child { margin-bottom: 2.5em; }
.fc-services > .wp-block-group__inner-container { display: contents; }
.fc-services h3 + p { margin-bottom: 1.25em; }
.fc-clients, .fc-director { margin-top: 2.5em; }
.fc-clients .fc-label, .fc-director .fc-label { margin-bottom: 0; }
.fc-clients__list { color: var(--ink); }

/* Contact: intro, then three short columns of details. */
.fc-contact { max-width: 58rem; }
.fc-contact__image { margin-bottom: var(--gap); }
.fc-contact .fc-prose { max-width: var(--measure); margin-bottom: 1em; }
.fc-contact__details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em 2rem; padding-top: 1.25em; border-top: 1px solid var(--rule); }
.fc-contact__details dt { color: var(--mute); }
.fc-contact__details a { border-bottom: 1px solid var(--rule); }
.fc-contact__details a:hover { border-color: var(--ink); }
.fc-contact__aside { margin-top: 0.75em; color: var(--mute); }
.fc-contact__aside a { color: var(--mute); }
@media (max-width: 760px) { .fc-contact__details { grid-template-columns: 1fr; } }

.fc-empty { margin: 20vh 0; color: var(--mute); }

/* WordPress content basics */
.wp-block-image figcaption, .wp-element-caption { font-size: var(--size-s); color: var(--mute); }
.wp-block-embed { margin: 2rem 0; }

/* ---------- Footer ---------- */
.fc-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	margin: 0 var(--gutter);
	padding: 14px 0 20px;
	border-top: 1px solid var(--rule);
	font-size: var(--size-s);
	color: var(--mute);
}
.fc-footer p { margin: 0; }
.fc-footer__links { list-style: none; display: flex; gap: 1.25em; margin: 0; padding: 0; }
.fc-footer a:hover { color: var(--ink); }

/* ---------- Motion: reveals, page fades, video previews ---------- */
/* Before the script runs, hold the page back so nothing flashes before it animates. */
.fc-js .fc-main, .fc-js .fc-footer { opacity: 0; }
.fc-js.fc-revealing .fc-main, .fc-js.fc-revealing .fc-footer,
.fc-shown .fc-main, .fc-shown .fc-footer { opacity: 1; }

.fc-revealing [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 0.55em, 0);
}
.fc-revealing [data-reveal].is-in { opacity: 1; transform: none; }
.fc-shown [data-reveal] { opacity: 1 !important; transform: none !important; }
.fc-line { display: block; }

/* Leaving a page: everything below the header fades out, then the next page fades in. */
html.fc-leaving .fc-main,
html.fc-leaving .fc-footer,
html.fc-leaving .fc-frame { opacity: 0; transition: opacity 0.5s var(--ease); }

/* Hover frame: still first, video fades over it once it is actually playing. */
/* The video sits, visible, under the still; the still fades away once it plays. (Safari will not play a video it considers invisible.) */
.fc-frame__video { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.fc-frame.is-playing img { opacity: 0; transition: opacity 0.6s var(--ease); }
.fc-frame__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.fc-frame__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Films: the still fades away to reveal the player. */
.fc-film__poster { z-index: 2; transition: opacity 0.6s var(--ease); }
.fc-film__poster.is-gone { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.fc-js .fc-main, .fc-js .fc-footer { opacity: 1; }
	.fc-revealing [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
	:root { --size: 16px; --size-s: 13px; }
	.fc-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "client year" "title title"; padding: 0.55rem 0; }
	.fc-row__client { grid-area: client; }
	.fc-row__title { grid-area: title; }
	.fc-row__title:empty { display: none; }
	.fc-row__year { grid-area: year; }
	.fc-footer { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}

/* ---------- Films fit the screen ----------
   Each frame is sized so the whole picture and its caption are visible at once.
   --fc-w / --fc-h come from the film; --fc-top is where the first film starts (set by a small script),
   otherwise the height of the header plus a margin. Wide screens get smaller frames rather than cropped ones. */
.fc-film {
	--fc-room: calc(100vh - var(--fc-top, 96px) - 3.25rem);
	max-width: min(1680px, 100%, max(320px, calc(var(--fc-room) * var(--fc-w, 16) / var(--fc-h, 9))));
}
@supports (height: 100svh) {
	.fc-film { --fc-room: calc(100svh - var(--fc-top, 96px) - 3.25rem); }
}
.fc-film--portrait {
	max-width: min(440px, 100%, max(240px, calc(var(--fc-room) * var(--fc-w, 9) / var(--fc-h, 16))));
}
.fc-project__head { margin-bottom: clamp(32px, 6vh, 64px); }

/* Studio: contact details at the foot of the page. */
.fc-studio__contact { max-width: 58rem; margin-top: var(--gap); }
.fc-studio__contact .fc-label { margin-bottom: 0; }
.fc-studio__contact-intro { max-width: var(--measure); margin: 0 0 1.5em; }

/* Header: three points across the page — Field. left, Index centre, Studio right. */
.fc-header { display: grid; grid-template-columns: 1fr auto 1fr; }
.fc-wordmark { justify-self: start; }
.fc-nav, .fc-nav__list { display: contents; }
.fc-nav__list > li:first-child { grid-column: 2; justify-self: center; }
.fc-nav__list > li:last-child { grid-column: 3; justify-self: end; }

/* Studio: the opening line set like the Index intro. */
.fc-studio__body { max-width: none; }
.fc-studio__body > p.fc-intro:first-child { margin: 0 0 calc(var(--gap) * 0.8); }

/* ---------- Sans for titles and the Index (Oct 2026) ----------
   Instrument Sans (SIL OFL), self-hosted in uploads/fonts. Navigation, labels and body copy stay in Newsreader. */
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/wp-content/uploads/fonts/instrument-sans-latinext-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/wp-content/uploads/fonts/instrument-sans-latin-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
:root { --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif; }

.fc-intro,
.fc-project__title, .fc-project__client, .fc-project__name {
	font-family: var(--sans);
	font-weight: 400;
	letter-spacing: -0.028em;
	line-height: 1.04;
}
.fc-list, .fc-row, .fc-next__link {
	font-family: var(--sans);
	letter-spacing: -0.005em;
}

/* ---------- Studio: full-bleed reel (Oct 2026) ---------- */
body.page-template-page-templatesstudio-php { overflow-x: clip; }
body.page-template-page-templatesstudio-php .fc-studio { margin-top: 0; }
body.page-template-page-templatesstudio-php .fc-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; background: transparent; mix-blend-mode: difference; z-index: 20; }
body.page-template-page-templatesstudio-php .fc-header,
body.page-template-page-templatesstudio-php .fc-header a { color: #fff; }
body.page-template-page-templatesstudio-php .fc-nav li:not(.current-menu-item) a { opacity: 0.55; }
.fc-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); overflow: hidden; background: var(--ink); margin-bottom: var(--gap); }
.fc-hero__media { position: absolute; inset: 0; overflow: hidden; }
.fc-hero__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s ease; }
.fc-hero__media iframe { position: absolute; top: 50%; left: 50%; width: max(100%, calc((100svh - var(--wp-admin--admin-bar--height, 0px)) * 16 / 9)); height: max(100%, 56.25vw); transform: translate(-50%, -50%); border: 0; pointer-events: none; opacity: 0; transition: opacity 0.8s ease; }
.fc-hero.is-playing .fc-hero__media iframe { opacity: 1; }
.fc-hero.is-playing .fc-hero__poster { opacity: 0; }
/* Hero type: a large statement, and a quieter line in the house serif. Both blend with the film like the nav. */
.fc-hero__text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--gutter); color: #fff; mix-blend-mode: difference; }
.fc-hero__text p { margin: 0; }
.fc-hero__text p:first-child { font-family: var(--sans); font-weight: 500; font-size: clamp(46px, 7.4vw, 152px); line-height: 0.9; letter-spacing: -0.052em; max-width: 8.6em; text-wrap: balance; margin-left: -0.05em; }
.fc-hero__text p:not(:first-child) { font-family: var(--sans); font-weight: 400; font-size: var(--size); line-height: 1.3; letter-spacing: -0.005em; max-width: 26em; padding-bottom: 0.35em; text-wrap: balance; hyphens: manual; }
.fc-hero__text p + p { margin-top: 0; }
@media (max-width: 760px) {
	.fc-hero__text { grid-template-columns: 1fr; row-gap: 18px; bottom: 20px; }
	.fc-hero__text p:first-child { font-size: clamp(44px, 13vw, 72px); }
	.fc-hero__text p:not(:first-child) { max-width: 22em; }
}

/* ---------- Studio: Clients and Contact at reading size, in the sans (Oct 2026). Labels stay in the serif. ---------- */
.fc-clients__list,
.fc-studio__contact-intro {
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(24px, 2.35vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.022em;
	max-width: 23em;
}
.fc-contact__details dd {
	font-family: var(--sans);
	font-size: clamp(18px, 1.35vw, 22px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.fc-contact__details .fc-contact__aside { font-size: var(--size-s); }
.fc-clients { max-width: none; }
.fc-clients__list { max-width: 26em; text-wrap: balance; }
.fc-client { white-space: nowrap; }
/* Nav with a single item (Oct 2026): keep it on the right, the wordmark is the home link. */
.fc-header .fc-nav__list > li:only-child { grid-column: -2 / -1; justify-self: end; }

/* Desaturate the difference blend on the hero text (Oct 2026): a grey copy on top, blended with "saturation". */
.fc-hero__text--mono { color: #808080; mix-blend-mode: saturation; pointer-events: none; user-select: none; }

/* ---------- Studio: Services — Shooting / Edit / Grading (Oct 2026) ----------
   Sits between the reel and Clients. All in the sans: names at Clients size, descriptions at Contact-details size.
   Three columns on the same 58rem measure as the Contact details, so the two grids line up. */
.fc-services { max-width: 58rem; margin-top: 2.5em; }
.fc-services .fc-label { margin-bottom: 0.4em; }
.fc-services .fc-services__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2em 2rem; }
.fc-services .fc-service { margin: 0; }
.fc-services .fc-service__name {
	margin: 0 0 0.3em;
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(24px, 2.35vw, 40px);
	line-height: 1.12;
	letter-spacing: -0.022em;
	color: var(--ink);
}
.fc-services .fc-service .fc-service__desc {
	margin: 0;
	max-width: 20em;
	color: var(--ink);
	font-family: var(--sans);
	font-weight: 400;
	font-size: clamp(18px, 1.35vw, 22px);
	line-height: 1.3;
	letter-spacing: -0.01em;
}
@media (max-width: 760px) {
	.fc-services .fc-services__list { grid-template-columns: 1fr; gap: 1.5em; }
}

/* ---------- Reel: Safari fix (Oct 2026) ----------
   Safari won't reliably autoplay a video it treats as invisible, so the player stays at full opacity underneath
   and the still sits on top of it, fading out once Vimeo confirms playback. */
.fc-hero__media { isolation: isolate; }
.fc-hero__media iframe { opacity: 1; z-index: 0; }
.fc-hero__media .fc-hero__poster { z-index: 1; }
.fc-hero.is-playing .fc-hero__media .fc-hero__poster { opacity: 0; }

/* ---------- Studio loader (Oct 2026) ----------
   Fades up from black to white, the "Field." wordmark (nav size, in ink) fades in on the white,
   then the whole layer fades out to the reel. Timing and logic in functions.php. */
.fc-loader {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	animation: fc-loader-up 0.8s ease forwards;
	transition: opacity 0.9s var(--ease);
}
.fc-loader__mark {
	font-family: var(--serif);
	font-size: var(--size);
	font-weight: 400;
	line-height: 1;
	color: var(--ink);
	opacity: 0;
	animation: fc-loader-in 0.7s var(--ease) 0.75s forwards;
}
.fc-loader.is-out { opacity: 0; pointer-events: none; }
.fc-loader-skip .fc-loader { display: none; }
@keyframes fc-loader-up { to { background: #fff; } }
@keyframes fc-loader-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .fc-loader { display: none; } }

/* Portrait reel on phones (Oct 2026): fill the screen with the 9:16 film. */
.fc-hero picture { position: absolute; inset: 0; }
.fc-hero.is-tall .fc-hero__media iframe { width: max(100%, calc((100svh - var(--wp-admin--admin-bar--height, 0px)) * 9 / 16)); height: max(100%, calc(100vw * 16 / 9)); }

/* ---------- Project pages: larger, sans titles (Oct 2026) ---------- */
.single-fc_project .fc-project__head { margin: 24px 0 var(--gap); }
.single-fc_project .fc-back { font-size: var(--size-s); margin-bottom: calc(var(--gap) * 0.6); }
.single-fc_project .fc-project__title { font-family: var(--sans); font-weight: 500; font-size: clamp(26px, 2.3vw, 42px); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 0 -0.03em; text-wrap: balance; }
.single-fc_project .fc-project__client + .fc-project__name { color: var(--mute); }
.single-fc_project .fc-project__meta { font-family: var(--serif); font-size: var(--size); margin-top: 0.9em; }
.single-fc_project .fc-project__lede { font-family: var(--sans); font-weight: 400; font-size: clamp(18px, 1.2vw, 22px); line-height: 1.18; letter-spacing: -0.018em; max-width: 24em; margin-top: 0.9em; color: var(--ink); text-wrap: pretty; }
/* Film captions: the film's name reads as a title, the running time stays quiet. */
.single-fc_project .fc-film__caption { align-items: baseline; margin-top: 0.75em; }
.single-fc_project .fc-film__title { font-family: var(--sans); font-weight: 500; font-size: clamp(16px, 1vw, 18px); letter-spacing: -0.012em; line-height: 1.15; }
/* Next project: a large link, like the title. */
.single-fc_project .fc-next { padding-top: 1rem; }
.single-fc_project .fc-next .fc-label { display: block; margin: 0 0 0.6em; font-size: var(--size-s); }
.single-fc_project .fc-next__link { display: block; font-family: var(--sans); font-weight: 500; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.05; letter-spacing: -0.03em; }
.single-fc_project .fc-next__link .fc-row__client { display: block; color: var(--ink); }
.single-fc_project .fc-next__link .fc-row__title { display: block; margin-left: 0; color: var(--mute); }
.single-fc_project .fc-next__link:hover .fc-row__title { color: var(--ink); }
/* The header is taller now: size films to a full screen (you scroll to them) rather than to the space left under the header. */
.single-fc_project .fc-film { --fc-room: calc(100svh - 8rem); }