Colors, Fonts, and two by two

The two headings take the site's own spelling and the shorter word. "Typefaces" is the more precise
term and "Fonts" is the one everybody reaches for; a section heading is a signpost, not a definition.

The fonts go two by two. Four across existed to keep this section the same height as Colours, because
as tabs they shared one grid cell and a taller panel moved everything below it. Stacked sections do not
have that constraint — each is as tall as it is and nothing above it moves — so the reason expired with
the tabs.

What four across cost was the labels: in a panel this narrow every select truncated to "Martia…", so
the row said four times that a font had been chosen and never which one. Two columns give each the room
to be read, which is the only thing the control is for.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

web/sections/LayoutPanel.tsx

@@ -277,7 +277,7 @@ export const LayoutPanel = () => {
     setEditorRef.current(
       <Accordion type="multiple" defaultValue={[tab]} className="flex flex-col gap-2">
         <AccordionItem value="colours" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Colours</AccordionTrigger>
+          <AccordionTrigger className="text-xs">Colors</AccordionTrigger>
           <AccordionContent>
       <>
           <div className="flex flex-wrap gap-4">
@@ -312,24 +312,24 @@ export const LayoutPanel = () => {
           </AccordionContent>
         </AccordionItem>
         <AccordionItem value="typefaces" className="rounded-lg border border-border px-4">
-          <AccordionTrigger className="text-xs">Typefaces</AccordionTrigger>
+          <AccordionTrigger className="text-xs">Fonts</AccordionTrigger>
           <AccordionContent>
       <>
           {/*
-            Four across, one row.
+            Two by two.
 
-            At `sm:` and not `lg:`. The breakpoint here is the BROWSER's, not the panel's — and this panel
-            is wide in every window anybody runs the admin in — but lg is 1024 and there was no reason to
-            make four short selects wait for it.
+            It was four across, to keep this section the same height as Colours — because they shared a
+            grid cell as tabs and a taller one moved everything below it. Stacked sections do not have
+            that constraint: each is as tall as it is, and nothing above it moves.
 
-            Two columns meant Typefaces was twice the height of Colours, so switching tabs moved
-            everything below it — and the preview above it changed size to match. A tab strip whose
-            contents jump is a tab strip that has to be re-read every time it is used.
+            What four across cost was the labels. In a panel this narrow they truncated to "Martia…" on
+            every select, so the row said four times that a font was chosen and never which. Two columns
+            give each one room to be read, which is the only thing this control is for.
 
             The hint moves into the option list's own space rather than a line under each select, which
             is where the second row of height was really going.
           */}
-          <div className="grid grid-cols-2 gap-3 sm:grid-cols-4">
+          <div className="grid grid-cols-2 gap-3">
             {ROLES.map(({ key, label, hint }) => (
               <div key={key} className="flex flex-col gap-1">
                 <label className="text-xs">{label}</label>