[css-values-5] Reorder text in arbitrary substitution section

Author: fantasai

css-values-5/Overview.bs

@@ -2657,15 +2657,86 @@ Appendix A: Arbitrary Substitution Functions</h2>
 	If a property value contains one or more [=arbitrary substitution functions=],
 	and those functions are themselves syntactically valid,
 	the entire value's grammar must be assumed to be valid at parse time.
-	It is only syntax-checked at computed-value time,
-	after [=arbitrary substitution=].
 
 	<wpt pathprefix="css/css-variables">
 	variable-reference-18.html
 	variable-reference-19.html
 	variable-reference-30.html
 	</wpt>
 
+	[=Arbitrary substitution functions=] are [=substituted=]
+	during style [=computed value|computation=],
+	before any other value transformations or introspection can occur.
+	If a property,
+	after [=substitution=],
+	does not match its declared grammar,
+	the declaration is [=invalid at computed-value time=].
+
+	<wpt pathprefix="css/css-variables">
+	variable-declaration-16.html
+	variable-declaration-17.html
+	variable-declaration-18.html
+	variable-declaration-19.html
+	variable-declaration-21.html
+	variable-transitions-transition-property-all-before-value.html
+	variable-transitions-value-before-transition-property-all.html
+	</wpt>
+
+	If a property value,
+	after [=substitution=],
+	contains only a single [=CSS-wide keyword=]
+	(and possibly whitespace/comments),
+	its value is determined as if that keyword were its [=specified value=] all along.
+
+	<wpt pathprefix="css/css-variables">
+	whitespace-in-fallback-crash.html
+	wide-keyword-fallback-001.html
+	wide-keyword-fallback-002.html
+	</wpt>
+
+	<div class='example'>
+		For example,
+		the following usage is fine from a syntax standpoint,
+		but results in nonsense when the variable is substituted in:
+
+		<pre>
+		:root { --looks-valid: 20px; }
+		p { background-color: var(--looks-valid); }
+		</pre>
+
+		Since ''20px'' is an invalid value for 'background-color',
+		the property becomes [=invalid at computed-value time=],
+		and instead resolves to ''transparent''
+		(the [=initial value=] for 'background-color').
+
+		If the property was one that's inherited by default,
+		such as 'color!!property',
+		it would compute to the inherited value
+		rather than the initial value.
+	</div>
+
+	<div class='example'>
+		While a ''var()'' function can't get a [=CSS-wide keyword=]
+		from the [=custom property=] itself--
+		if you tried to specify that,
+		like ''--foo: initial;'',
+		it would just trigger [[css-cascade-4#defaulting-keywords|explicit defaulting]]
+		for the custom property--
+		it can have a [=CSS-wide keyword=] in its fallback:
+
+		<pre>
+		p { color: var(--does-not-exist, initial); }
+		</pre>
+
+		In the above code, if the ''--does-not-exist'' property didn't exist
+		or is [=invalid at computed-value time=],
+		the ''var()'' will instead substitute in the ''initial'' keyword,
+		making the property behave as if it was originally ''color: initial''.
+		This will make it take on the document's initial 'color' value,
+		rather than defaulting to inheritance,
+		as it would if there were no fallback.
+	</div>
+
 	Each [=arbitrary substitution function=]
 	must define how to <dfn export>resolve an arbitrary substitution function</dfn>
 	for itself,
@@ -2796,79 +2867,6 @@ Appendix A: Arbitrary Substitution Functions</h2>
 	variable-reference-without-whitespace.html
 	</wpt>
 
-	[=Arbitrary substitution functions=] are [=substituted=]
-	during style [=computed value|computation=],
-	before any other value transformations or introspection can occur.
-	If a property,
-	after [=substitution=],
-	does not match its declared grammar,
-	the declaration is <a>invalid at computed-value time</a>.
-
-	<wpt pathprefix="css/css-variables">
-	variable-declaration-16.html
-	variable-declaration-17.html
-	variable-declaration-18.html
-	variable-declaration-19.html
-	variable-declaration-21.html
-	variable-transitions-transition-property-all-before-value.html
-	variable-transitions-value-before-transition-property-all.html
-	</wpt>
-
-	If a property,
-	after [=substitution=],
-	contains only a [=CSS-wide keyword=]
-	(and possibly whitespace/comments),
-	its value is determined as if that keyword were its [=specified value=] all along.
-
-	<wpt pathprefix="css/css-variables">
-	whitespace-in-fallback-crash.html
-	wide-keyword-fallback-001.html
-	wide-keyword-fallback-002.html
-	</wpt>
-
-	<div class='example'>
-		For example,
-		the following usage is fine from a syntax standpoint,
-		but results in nonsense when the variable is substituted in:
-
-		<pre>
-		:root { --looks-valid: 20px; }
-		p { background-color: var(--looks-valid); }
-		</pre>
-
-		Since ''20px'' is an invalid value for 'background-color',
-		the property becomes [=invalid at computed-value time=],
-		and instead resolves to ''transparent''
-		(the [=initial value=] for 'background-color').
-
-		If the property was one that's inherited by default,
-		such as 'color!!property',
-		it would compute to the inherited value
-		rather than the initial value.
-	</div>
-
-	<div class='example'>
-		While a ''var()'' function can't get a [=CSS-wide keyword=]
-		from the [=custom property=] itself--
-		if you tried to specify that,
-		like ''--foo: initial;'',
-		it would just trigger [[css-cascade-4#defaulting-keywords|explicit defaulting]]
-		for the custom property--
-		it can have a [=CSS-wide keyword=] in its fallback:
-
-		<pre>
-		p { color: var(--does-not-exist, initial); }
-		</pre>
-
-		In the above code, if the ''--does-not-exist'' property didn't exist
-		or is [=invalid at computed-value time=],
-		the ''var()'' will instead substitute in the ''initial'' keyword,
-		making the property behave as if it was originally ''color: initial''.
-		This will make it take on the document's initial 'color' value,
-		rather than defaulting to inheritance,
-		as it would if there were no fallback.
-	</div>
-
 <!-- Big Text: invalid
 
 ████ █    █▌ █▌   █▌  ███▌  █▌    ████ ████▌