refactor

index.html

@@ -11,6 +11,10 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
 
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap">
+
 <style>
     /* Fluid base size: every rem below scales with the viewport width
        (14px floor on phones, 18px cap on large screens) */
@@ -32,19 +36,22 @@
 
     :root {
         --accent: #1a9850;
-        --accent-soft: #e8f5ec;
         --border: #e2e2e0;
+        --rule: #1d1d1b;
         --muted: #6b6b68;
-        --surface: #fafaf9;
+        --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
+    }
+
+    h1, h3 {
+        font-family: var(--serif);
+        font-weight: 600;
     }
 
+    /* Sections are separated by a rule, not boxed */
     .card {
-        background: var(--surface);
-        border: 1px solid var(--border);
-        border-radius: 14px;
-        padding: clamp(18px, 2.2vw, 32px) clamp(20px, 3vw, 44px);
-        margin-top: 24px;
-        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+        border-top: 1px solid var(--rule);
+        padding-top: 14px;
+        margin-top: 40px;
     }
 
     .cardHeader {
@@ -62,33 +69,16 @@
 
     .status {
         font-size: 0.8125rem;
-        padding: 4px 12px;
-        border-radius: 999px;
-        border: 1px solid transparent;
+        color: var(--muted);
         overflow-wrap: anywhere;
     }
 
-    .status:empty {
-        display: none;
-    }
-
-    .status.ok {
-        background: var(--accent-soft);
-        color: #146c3a;
-        border-color: #bfe3cb;
-    }
-
-    .status.loading,
-    .status.custom {
-        background: #f1f1ef;
-        color: var(--muted);
-        border-color: var(--border);
+    .status.ok b {
+        color: #1d1d1b;
     }
 
     .status.error {
-        background: #fdecea;
         color: #a52a1f;
-        border-color: #f5c6c0;
     }
 
     .field {
@@ -116,22 +106,20 @@
     .card input[type="number"] {
         font: inherit;
         font-size: 0.875rem;
-        height: 38px;
-        padding: 0 12px;
-        border: 1px solid #cfcfcc;
-        border-radius: 8px;
+        height: 36px;
+        padding: 0 10px;
+        border: 1px solid #bdbdba;
+        border-radius: 3px;
         background: white;
         width: 100%;
         box-sizing: border-box;
-        transition: border-color 0.15s, box-shadow 0.15s;
     }
 
     .card select:focus,
     .card input[type="text"]:focus,
     .card input[type="number"]:focus {
         outline: none;
-        border-color: var(--accent);
-        box-shadow: 0 0 0 3px rgba(26, 152, 80, 0.15);
+        border-color: #1d1d1b;
     }
 
     .sources {
@@ -145,43 +133,37 @@
     .divider {
         color: var(--muted);
         font-size: 0.8125rem;
-        height: 38px;
+        height: 36px;
         display: flex;
         align-items: center;
+        font-style: italic;
     }
 
     .inputGroup {
         display: flex;
-    }
-
-    .inputGroup input[type="text"] {
-        border-radius: 8px 0 0 8px;
+        gap: 8px;
     }
 
     .inputGroup button {
         font: inherit;
         font-size: 0.875rem;
-        font-weight: 600;
-        height: 38px;
-        padding: 0 18px;
-        border: 1px solid var(--accent);
-        border-radius: 0 8px 8px 0;
-        background: var(--accent);
+        height: 36px;
+        padding: 0 16px;
+        border: 1px solid #1d1d1b;
+        border-radius: 3px;
+        background: #1d1d1b;
         color: white;
         cursor: pointer;
-        margin-left: -1px;
     }
 
     .inputGroup button:hover {
-        background: #137a40;
+        background: #444;
     }
 
     .sectionLabel {
-        margin: 22px 0 10px;
-        font-size: 0.75rem;
-        letter-spacing: 0.06em;
-        text-transform: uppercase;
-        color: var(--muted);
+        margin: 26px 0 10px;
+        font-size: 0.875rem;
+        font-weight: 600;
     }
 
     .archGrid {
@@ -190,20 +172,15 @@
         gap: 16px;
     }
 
+    /* Architecture summary as a plain line: "GQA · R = 1/4" */
     #archSummary {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
         margin-top: 12px;
+        font-size: 0.8125rem;
+        color: var(--muted);
     }
 
-    .chip {
-        font-size: 0.75rem;
-        padding: 3px 10px;
-        border-radius: 999px;
-        background: white;
-        border: 1px solid var(--border);
-        color: #444;
+    .chip + .chip::before {
+        content: " · ";
     }
 
     @media (max-width: 700px) {
@@ -236,19 +213,19 @@
 
     .badge {
         font-size: 0.8125rem;
-        font-weight: 600;
         font-variant-numeric: tabular-nums;
-        padding: 2px 10px;
-        border-radius: 6px;
-        background: var(--accent-soft);
-        color: #146c3a;
+    }
+
+    .badge::before {
+        content: "= ";
+        color: var(--muted);
     }
 
     #ninSlider {
         width: 100%;
         display: block;
         margin-top: 10px;
-        accent-color: var(--accent);
+        accent-color: #1d1d1b;
     }
 
     #ninLabels {
@@ -283,18 +260,14 @@
     }
 
     .eyebrow {
-        font-size: 0.75rem;
-        font-weight: 700;
-        letter-spacing: 0.1em;
-        text-transform: uppercase;
-        color: var(--accent);
+        font-size: 0.875rem;
+        color: var(--muted);
     }
 
     .hero h1 {
-        font-size: 1.875rem;
-        line-height: 1.2;
-        margin: 6px 0 8px;
-        letter-spacing: -0.01em;
+        font-size: 2.25rem;
+        line-height: 1.15;
+        margin: 4px 0 10px;
     }
 
     .lede {
@@ -315,7 +288,7 @@
         display: grid;
         /* Theta card as wide as its one-line rows; the formula takes the rest */
         grid-template-columns: minmax(0, 1fr) auto;
-        gap: 20px;
+        gap: 48px;
         align-items: stretch;
     }
 
@@ -327,7 +300,7 @@
 
     .card h3 {
         margin: 0 0 16px;
-        font-size: 1.0625rem;
+        font-size: 1.25rem;
     }
 
     /* Always a single line: everything inside is sized in em, and
@@ -362,7 +335,7 @@
         justify-content: space-between;
         gap: 0.33em;
         padding: 0.55em 0.78em 0.45em;
-        border-radius: 0.55em;
+        border-radius: 2px;
         border: 1.5px solid var(--c);
         background-color: color-mix(in srgb, var(--c) 16%, white);
     }
@@ -441,7 +414,6 @@
         display: inline-block;
         width: 10px;
         height: 10px;
-        border-radius: 3px;
         background: var(--c);
         margin-right: 8px;
         vertical-align: middle;
@@ -455,11 +427,12 @@
 
     /* ---------- About ---------- */
     .about {
-        margin: 32px 0 12px;
+        margin: 48px 0 12px;
     }
 
     .about p {
         line-height: 1.6;
+        max-width: 75ch;
     }
 
     .about a {
@@ -498,11 +471,8 @@
 
     .bibtex pre {
         margin: 0;
-        padding: 14px 16px;
-        padding-right: 80px;
-        background: white;
-        border: 1px solid var(--border);
-        border-radius: 8px;
+        padding: 2px 70px 2px 14px;
+        border-left: 2px solid var(--border);
         font-size: 0.8125rem;
         line-height: 1.5;
         overflow-x: auto;
@@ -510,24 +480,18 @@
 
     .copyBtn {
         position: absolute;
-        top: 8px;
-        right: 8px;
+        top: 0;
+        right: 0;
         font: inherit;
-        font-size: 0.75rem;
-        font-weight: 600;
-        padding: 4px 12px;
-        border: 1px solid var(--border);
-        border-radius: 6px;
-        background: var(--surface);
-        color: #333;
+        font-size: 0.8125rem;
+        padding: 0;
+        border: none;
+        background: none;
+        color: #146c3a;
+        text-decoration: underline;
         cursor: pointer;
     }
 
-    .copyBtn:hover {
-        border-color: var(--accent);
-        color: var(--accent);
-    }
-
     /* Model shown under each plot title, kept in sync by setStatus() */
     #plots h4 {
         margin-bottom: 4px;