tidying up style a bit

assets/10-theme.css

@@ -253,4 +253,58 @@ input:focus-visible {
 .site-main {
   min-height: 0;
   padding-bottom: 1.5rem;
+}
+
+.fda-logo {
+    display: block;
+    width: 300px;
+    max-width: 100%;
+    height: auto;
+}
+
+/* Let the header use the full screen width, despite .site-container. */
+.site-container.site-header-inner {
+    max-width: none;
+    width: 100%;
+    margin: 0;
+    padding: 14px 16px;
+    box-sizing: border-box;
+
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+    gap: 16px;
+}
+
+.site-header-inner .site-brand {
+    justify-self: start;
+}
+
+.fda-logo {
+    display: block;
+    width: 260px;
+    height: auto;
+}
+
+.site-tool-title {
+    justify-self: center;
+    color: #fff;
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-align: center;
+}
+
+.site-header-inner .site-nav {
+    justify-self: end;
+}
+
+@media (max-width: 1100px) {
+    .site-container.site-header-inner {
+        grid-template-columns: 1fr auto;
+    }
+
+    .site-tool-title {
+        grid-column: 1 / -1;
+        grid-row: 2;
+    }
 }

main.py

@@ -26,7 +26,21 @@ app.layout = html.Div([
 
     html.Header(
         html.Div([
-            html.A("Extraction condition comparison tool", href="/", className="site-brand"),
+            html.A(
+                html.Img(
+                    src="/assets/gov-fda-new-white.svg",
+                    alt="U.S. Food and Drug Administration",
+                    className="fda-logo",
+                ),
+                href="/",
+                className="site-brand",
+            ),
+
+            html.Span(
+                "Extraction condition justification tool",
+                className="site-tool-title",
+            ),
+
             html.Nav([
                 dcc.Link("Model", href="/"),
                 dcc.Link("Instructions", href="/instructions"),