diff --git a/web/gic.aria.rip/site/css/gic.css b/web/gic.aria.rip/site/css/gic.css
index f940b18..b04e4ea 100644
--- a/web/gic.aria.rip/site/css/gic.css
+++ b/web/gic.aria.rip/site/css/gic.css
@@ -1,4 +1,4 @@
-/* GIC.css Version 1.3.0
+/* GIC.css Version 1.4.0
  * (c) Copyright Ariadne (me@aria.rip) 2026.
  * Made available under the MIT license */
 :root {
@@ -78,6 +78,7 @@
     --white: #ffffff;
 
     --colour-brand: var(--blue);
+    --colour-brand-text: var(--white);
 
     --colour-text: var(--black);
     --colour-body-background: var(--white);
@@ -268,6 +269,7 @@
         --colour-surface-text: #fff;
         --colour-surface-board: var(--blue-tint-50);
         --colour-button-text: var(--black);
+        --colour-brand-text: var(--black);
     }
 
 
@@ -633,20 +635,105 @@ header.masthead {
     line-height: 1;
 
     border-bottom: 1px solid transparent;
-    color: var(--colour-surface-text);
+    color: var(--colour-brand-text);
     background: var(--colour-brand);
 
-    padding: 16px;
+    &:has(> a) { padding: 16px; }
 
-    a {
+    > a {
         display: inline;
         margin-right: var(--spacing-2);
-        font-size: 30px;
+        font-size: var(--font-size-27);
+        line-height: var(--line-height-27);
         text-decoration: none;
         color: inherit;
 
         &:visited { color: inherit; }
     }
+
+    nav {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        &:has(input:checked) {
+            padding-top: var(--spacing-3);
+            flex-direction: column;
+        }
+
+        ul {
+            list-style-type: none;
+            align-items: center;
+            margin: 0; padding: 0;
+            height: 100%;
+
+            /* On mobile layouts, hide items by default (except for the first one, which is a checkbox in disguise).
+              When checkbox is checked, flex in a column */
+            display: flex;
+            flex-grow: 1;
+            flex-direction: row;
+            justify-content: flex-end;
+            li:not(:first-child) { display: none; }
+            &:has(input:checked){
+                width: 100%;
+                display: flex;
+                flex-direction: column;
+                margin-top: var(--spacing-3);
+                li {
+                    display: block;
+                    width: 100%;
+                    text-align: center;
+                    border-top: 1px solid var(--colour-text);
+                }
+            }
+
+            /* On tablet and above, show in a row */
+            @media screen and (min-width: 641px) { /* tablet */
+                li:has(input) { display: none !important; }
+                li { display: block !important; }
+                flex-direction: row;
+                justify-content: flex-start;
+            }
+
+            li {
+                margin: 0;
+                box-sizing: border-box;
+
+                /* Checkbox used for show/hide on mobile */
+                input {
+                    appearance: none;
+                    display: block; width: 100%; height: 100%;
+                    outline: none;
+                    border: none;
+                    margin: 0 auto;
+                    &::before {
+                        font-size: var(--font-size-16);
+                        display: block;
+                        width: 100%;
+                        text-align: center;
+                        content: "Open Navbar";
+                        font-weight: var(--font-weight-bold);
+                    }
+                    &:checked::before { content: "Close navbar"; }
+                }
+
+                a,input {
+                    padding: var(--spacing-4);
+                    display: block;
+                    box-sizing: border-box;
+                    width: 100%; height: 100%;
+
+                    color: var(--colour-brand-text) !important;
+                    text-decoration: none;
+
+                    &:hover, &:focus {
+                        background: var(--colour-hover);
+                        color: var(--colour-text) !important;
+                    }
+                }
+            }
+        }
+    }
 }
 
 footer {
@@ -660,6 +747,51 @@ footer {
     background: var(--colour-surface-background);
 }
 
+/* ______  ___  ____  __     ____  __  */
+/* | || | // \\ || )) ||    ||    (( \ */
+/*   ||   ||=|| ||=)  ||    ||==   \\  */
+/*   ||   || || ||_)) ||__| ||___ \_)) */
+/*                                     */
+table {
+    font-size: var(--font-size-19);
+    line-height: var(--line-height-19);
+
+    margin-bottom: var(--spacing-6);
+
+    width: 100%;
+    display: block;
+    overflow: auto;
+
+    border-spacing: 0;
+    border-collapse: collapse;
+
+    thead { font-weight: var(--font-weight-bold); }
+
+    td,th {
+        padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) 0;
+        border-bottom: 1px solid var(--colour-border);
+        text-align: left;
+        vertical-align: top;
+
+        &.numeric { text-align: right; }
+        &:last-child { padding-right: 0; }
+    }
+
+
+    caption {
+        display: table-caption;
+        font-weight: var(--font-weight-bold);
+        text-align: left;
+
+
+        &.xl, &.l, &.m { margin-bottom: var(--spacing-3); }
+
+        &.xl { font-size: var(--font-size-48); line-height: var(--line-height-48); }
+        &.l { font-size: var(--font-size-36); line-height: var(--line-height-36); }
+        &.m { font-size: var(--font-size-24); line-height: var(--line-height-24); }
+    }
+}
+
 /* ____ ____ ____ _  _ ____  */
 /* |___ |  | |__/ |\/| [__   */
 /* |    |__| |  \ |  | ___]  */
diff --git a/web/gic.aria.rip/site/index.html b/web/gic.aria.rip/site/index.html
index f4fef06..4874551 100644
--- a/web/gic.aria.rip/site/index.html
+++ b/web/gic.aria.rip/site/index.html
@@ -21,7 +21,7 @@
                     </p>
                 </div>
                 <div class="one-third">
-                    <h4><a href="/css/gic.css">Download Version 1.3.0</a></h4>
+                    <h4><a href="/css/gic.css">Download Version 1.4.0</a></h4>
                     <h4><a class="novisited" href="/kitchen-sink">Kitchen Sink</a></h4>
                 </div>
             </grid-container>
diff --git a/web/gic.aria.rip/site/kitchen-sink.html b/web/gic.aria.rip/site/kitchen-sink.html
index dd7d20d..b39890d 100644
--- a/web/gic.aria.rip/site/kitchen-sink.html
+++ b/web/gic.aria.rip/site/kitchen-sink.html
@@ -52,6 +52,83 @@
 
             <hr class="visible"/>
         </section>
+
+        <section class="whole-row">
+            <h1>Tables</h1>
+
+            <table>
+                <caption>A test table</caption>
+                <thead>
+                    <tr>
+                        <td>One</td>
+                        <td>Two</td>
+                        <td>Three</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>A</td>
+                        <td>B</td>
+                        <td>C</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <table>
+                <caption class=xl>XL caption</caption>
+                <thead>
+                    <tr>
+                        <td>One</td>
+                        <td>Two</td>
+                        <td>Three</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>A</td>
+                        <td>B</td>
+                        <td>C</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <table>
+                <caption class=l>L caption</caption>
+                <thead>
+                    <tr>
+                        <td>One</td>
+                        <td>Two</td>
+                        <td>Three</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>A</td>
+                        <td class=numeric>£0.33</td>
+                        <td>C</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <table>
+                <caption class=m>M caption</caption>
+                <thead>
+                    <tr>
+                        <td>One</td>
+                        <td>Two</td>
+                        <td>Three</td>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>A</td>
+                        <td>B</td>
+                        <td>C</td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+
         <section class="whole-row">
             <h1>Forms</h1>
 
@@ -122,6 +199,20 @@
 <header class="masthead">
     <a>masthead</a>
 </header>
+<hr class="xl"/>
+
+<header class="masthead">
+    <nav>
+        <ul>
+            <li><input type=checkbox name=show></li>
+            <li><a href="/">masthead</a></li>
+            <li><a href="/">with navbar</a></li>
+            <li><a href="/">and some items</a></li>
+        </ul>
+    </nav>
+</header>
+
+<hr class="xl"/>
 
 <footer>
     <grid-container>