Restyle typography: Besley headings, IBM Plex Sans/Mono body, remove uppercaseHEADmaster

- Load Besley 600, IBM Plex Sans 400/500/700, IBM Plex Mono 400/500 via Google Fonts
- Replace system serif/mono stacks with intentional font choices
- Remove text-transform: uppercase everywhere except HITO logo
- Update all template text from ALL CAPS to natural case
- Bump mobile base font from 15px to 16px (prevents iOS input zoom)
- Raise minimum font-size to 0.8rem across all small text
- Fix WCAG AA contrast: --gold-dim to #9E8340, --red-bright to #E04530
- Ensure all touch targets meet 44px minimum (inputs, buttons, checkboxes)
- Blockquotes now render in Besley for literary weight
- Strong elements use bold weight instead of italic for sans-serif body

1 files changed, 78 insertions, 76 deletions

diff --git a/static/css/hito.css b/static/css/hito.css
index 1de9869..dcfb3ad 100644
--- a/static/css/hito.css
+++ b/static/css/hito.css
@@ -1,9 +1,8 @@
-/* HITO - Objectivist Aesthetic
+/* HITO - Solid. Reliable. Authoritative.
    Black. Gold. White. No compromise.
-   Rectilinear. Architectural. Certain.
 
-   "A is A." The design reflects the philosophy:
-   clarity, purpose, and respect for the rational mind. */
+   Besley for headings. Plex Sans for body. Plex Mono for data.
+   Accessibility-first, mobile-primary. Built for the gym. */
 
 /* === VARIABLES === */
 
@@ -14,13 +13,13 @@
   --fg: #F0EDE6;
   --fg-dim: #9A958D;
   --gold: #C5A24D;
-  --gold-dim: #8B7235;
+  --gold-dim: #9E8340;
   --red: #8B0000;
-  --red-bright: #CC2200;
+  --red-bright: #E04530;
   --green: #4A7A3A;
-  --mono: 'SF Mono', 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
-  --serif: Georgia, 'Times New Roman', 'Noto Serif', serif;
-  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --mono: 'IBM Plex Mono', 'SF Mono', 'Consolas', monospace;
+  --heading: 'Besley', Georgia, serif;
+  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
 }
 
 /* === RESET === */
@@ -41,7 +40,7 @@ html {
 body {
   background-color: var(--bg);
   color: var(--fg);
-  font-family: var(--serif);
+  font-family: var(--sans);
   min-height: 100vh;
   display: flex;
   justify-content: center;
@@ -56,23 +55,22 @@ main {
 /* === TYPOGRAPHY === */
 
 h1, h2, h3 {
-  font-family: var(--serif);
-  font-weight: normal;
-  letter-spacing: 0.05em;
+  font-family: var(--heading);
+  font-weight: 600;
+  letter-spacing: normal;
 }
 
 h2 {
-  font-size: 1.6rem;
+  font-size: 1.75rem;
   color: var(--gold);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.01em;
   margin-bottom: 1.5rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--gold-dim);
 }
 
 h3 {
-  font-size: 1.1rem;
+  font-size: 1.15rem;
   color: var(--fg);
   margin-bottom: 0.5rem;
 }
@@ -83,8 +81,7 @@ p {
 
 strong {
   color: var(--gold);
-  font-weight: normal;
-  font-style: italic;
+  font-weight: 700;
 }
 
 a {
@@ -112,17 +109,15 @@ header {
 
 .logo {
   font-size: 2.5rem;
-  letter-spacing: 0.3em;
+  letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 0.1rem;
-  font-weight: normal;
 }
 
 .subtitle {
-  font-size: 0.75rem;
-  letter-spacing: 0.2em;
-  text-transform: uppercase;
+  font-size: 0.8rem;
+  letter-spacing: 0.1em;
   color: var(--fg-dim);
   font-family: var(--mono);
 }
@@ -139,9 +134,10 @@ blockquote {
   border-left: 2px solid var(--gold-dim);
   padding-left: 1.25rem;
   margin: 0;
-  font-style: italic;
+  font-family: var(--heading);
+  font-weight: 600;
   color: var(--fg-dim);
-  font-size: 0.9rem;
+  font-size: 0.95rem;
   line-height: 1.7;
 }
 
@@ -162,9 +158,8 @@ blockquote cite {
   color: var(--bg);
   font-family: var(--mono);
   font-size: 0.85rem;
-  font-weight: bold;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   padding: 0.9rem 2rem;
   border: none;
   cursor: pointer;
@@ -184,9 +179,9 @@ blockquote cite {
   color: var(--red-bright);
   font-family: var(--mono);
   font-size: 0.8rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  padding: 0.7rem 1.5rem;
+  letter-spacing: 0.05em;
+  padding: 0.85rem 1.5rem;
+  min-height: 2.75rem;
   border: 1px solid var(--red);
   cursor: pointer;
   text-decoration: none;
@@ -206,9 +201,8 @@ blockquote cite {
   color: var(--fg);
   font-family: var(--mono);
   font-size: 0.85rem;
-  font-weight: bold;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   padding: 0.9rem 2rem;
   border: none;
   cursor: pointer;
@@ -226,9 +220,9 @@ blockquote cite {
   color: var(--fg-dim);
   font-family: var(--mono);
   font-size: 0.8rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  padding: 0.7rem 1.5rem;
+  letter-spacing: 0.05em;
+  padding: 0.85rem 1.5rem;
+  min-height: 2.75rem;
   border: 1px solid var(--fg-dim);
   text-decoration: none;
   margin-top: 1rem;
@@ -253,8 +247,8 @@ fieldset {
 legend {
   font-family: var(--mono);
   font-size: 0.8rem;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   color: var(--gold);
   padding-bottom: 0.75rem;
   margin-bottom: 1rem;
@@ -278,7 +272,8 @@ input[type="text"] {
   color: var(--fg);
   font-family: var(--mono);
   font-size: 1rem;
-  padding: 0.5rem 0.5rem;
+  padding: 0.75rem 0.5rem;
+  min-height: 2.75rem;
   width: 100%;
   transition: border-color 0.15s;
 }
@@ -319,10 +314,10 @@ input[type="number"]::placeholder {
 
 .unit {
   font-family: var(--mono);
-  font-size: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
   color: var(--fg-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
 }
 
 /* === INSTRUCTIONS === */
@@ -382,9 +377,9 @@ input[type="number"]::placeholder {
 .days-remaining .label {
   font-family: var(--mono);
   font-size: 0.85rem;
+  font-weight: 500;
   color: var(--fg-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.05em;
 }
 
 .next-date {
@@ -409,8 +404,8 @@ input[type="number"]::placeholder {
 .history h3 {
   font-family: var(--mono);
   font-size: 0.8rem;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   color: var(--fg-dim);
   margin-bottom: 1rem;
 }
@@ -419,7 +414,7 @@ input[type="number"]::placeholder {
   display: flex;
   align-items: center;
   gap: 1rem;
-  padding: 0.5rem 0;
+  padding: 0.75rem 0;
   border-bottom: 1px solid var(--bg-raised);
   font-size: 0.9rem;
 }
@@ -437,9 +432,9 @@ input[type="number"]::placeholder {
 
 .history-badge {
   font-family: var(--mono);
-  font-size: 0.65rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   padding: 0.15rem 0.4rem;
 }
 
@@ -467,9 +462,9 @@ input[type="number"]::placeholder {
 
 .group-label {
   font-family: var(--mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   color: var(--gold-dim);
   padding: 0;
   margin-bottom: 1rem;
@@ -497,7 +492,6 @@ input[type="number"]::placeholder {
 
 .prescription strong {
   color: var(--gold);
-  font-style: normal;
 }
 
 .set-row {
@@ -510,10 +504,10 @@ input[type="number"]::placeholder {
 
 .set-label {
   font-family: var(--mono);
-  font-size: 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
   color: var(--fg-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
   min-width: 3rem;
 }
 
@@ -524,19 +518,21 @@ input[type="number"]::placeholder {
 .failure-check {
   display: flex;
   align-items: center;
-  gap: 0.3rem;
+  gap: 0.4rem;
   font-family: var(--mono);
-  font-size: 0.7rem;
+  font-size: 0.8rem;
+  font-weight: 500;
   color: var(--fg-dim);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  letter-spacing: 0.02em;
   cursor: pointer;
+  padding: 0.5rem 0.25rem;
+  min-height: 2.75rem;
 }
 
 .failure-check input[type="checkbox"] {
   accent-color: var(--gold);
-  width: 1rem;
-  height: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 /* === SESSION COMPLETE === */
@@ -600,8 +596,8 @@ input[type="number"]::placeholder {
 .recovery-info h3 {
   font-family: var(--mono);
   font-size: 0.8rem;
-  letter-spacing: 0.15em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   color: var(--fg-dim);
   margin-bottom: 0.75rem;
 }
@@ -661,7 +657,7 @@ input[type="number"]::placeholder {
 
 @media (max-width: 480px) {
   html {
-    font-size: 15px;
+    font-size: 16px;
   }
 
   body {
@@ -723,8 +719,8 @@ input[type="number"]::placeholder {
 .day-header {
   font-family: var(--mono);
   font-size: 0.85rem;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   color: var(--gold);
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
@@ -765,7 +761,8 @@ input[type="number"]::placeholder {
   color: var(--fg);
   font-family: var(--mono);
   font-size: 0.8rem;
-  padding: 0.4rem 0.5rem;
+  padding: 0.7rem 0.5rem;
+  min-height: 2.75rem;
   flex: 1;
   max-width: 20rem;
 }
@@ -779,10 +776,11 @@ input[type="number"]::placeholder {
   background: transparent;
   color: var(--gold-dim);
   font-family: var(--mono);
-  font-size: 0.7rem;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
-  padding: 0.35rem 0.75rem;
+  font-size: 0.8rem;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  padding: 0.65rem 1rem;
+  min-height: 2.75rem;
   border: 1px solid var(--gold-dim);
   cursor: pointer;
   transition: all 0.15s;
@@ -808,6 +806,9 @@ input[type="number"]::placeholder {
   font-size: 0.8rem;
   letter-spacing: 0.05em;
   color: var(--fg-dim);
+  display: inline-block;
+  padding: 0.75rem 0;
+  min-height: 2.75rem;
 }
 
 .nav-links a:hover {
@@ -855,7 +856,8 @@ input[type="number"]::placeholder {
   display: block;
   font-family: var(--mono);
   font-size: 0.9rem;
-  letter-spacing: 0.15em;
+  font-weight: 500;
+  letter-spacing: 0.05em;
   color: var(--gold);
   margin-bottom: 0.4rem;
 }