npm - heyiam - Versions diffs - 0.3.6 → 0.3.7 - Mend

heyiam 0.3.6 → 0.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (70) hide show

package/dist/render/templates/paper/portfolio.liquid CHANGED Viewed

@@ -116,8 +116,8 @@
           <h3 class="project-card__headline">
             <a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a>
           </h3>
-          {% if p.narrative %}
-          <p class="project-card__narrative">{{ p.narrative | truncate: 120 }}</p>
+          {% if p.tagline != blank %}
+          <p class="project-card__narrative">{{ p.tagline }}</p>
           {% endif %}
           <p class="project-card__meta">
             <span>{{ p.totalSessions }} sessions</span>
@@ -144,9 +144,9 @@
             </p>
             {% endif %}
           {% endif %}
-          {% if p.skills.size > 0 %}
+          {% if p.profileSkills.size > 0 %}
           <div class="project-card__skills" aria-label="Skills used in {{ p.title }}">
-            {% for skill in p.skills %}
+            {% for skill in p.profileSkills %}
             <span class="skill-tag chip">{{ skill }}</span>
             {% endfor %}
           </div>

package/dist/render/templates/paper/styles.css CHANGED Viewed

@@ -163,7 +163,7 @@ a:focus-visible {
   padding: 0.75rem 0;
   border-bottom: 1px solid var(--paper-border);
   font-family: var(--paper-font-mono);
-  font-size: 0.8125rem;
+  font-size: 0.875rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
 }
@@ -1480,6 +1480,65 @@ a.session-card:hover {
   }
 }
+@media (max-width: 480px) {
+  .page-wrapper {
+    padding: 0 0.75rem;
+  }
+  .masthead {
+    padding: 1.5rem 0 1rem;
+  }
+  .masthead__title {
+    font-size: 1.5rem;
+  }
+  .masthead__edition {
+    font-size: 0.75rem;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .byline {
+    padding: 1rem 0;
+  }
+  .article-header__headline,
+  .projects-section__heading {
+    font-size: 1.25rem;
+  }
+  .project-card__headline {
+    font-size: 1.125rem;
+  }
+  .session-meta {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+  .stats-table th,
+  .stats-table td {
+    padding: 0.3rem 0.375rem;
+    font-size: 0.75rem;
+  }
+  .stats-table td:last-child {
+    font-size: 0.8125rem;
+  }
+  .timeline-table,
+  .activity-table,
+  .agents-table {
+    font-size: 0.75rem;
+  }
+  .timeline-table th,
+  .timeline-table td,
+  .activity-table th,
+  .activity-table td,
+  .agents-table th,
+  .agents-table td {
+    padding: 0.3rem 0.375rem;
+  }
+  .nav-bar {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+  .dev-take__text {
+    font-size: 1rem;
+  }
+}
 /* ── Medium breakpoint ── */
 @media (min-width: 768px) and (max-width: 1023px) {
   .projects-columns {

package/dist/render/templates/parallax/portfolio.liquid CHANGED Viewed

@@ -137,12 +137,12 @@
           {% for p in projects %}
           <a href="/{{ user.username }}/{{ p.slug }}" class="project-card reveal" data-float="0.08">
             <h3 class="project-card__name">{{ p.title }}</h3>
-            {% if p.narrative != blank %}
-            <p class="project-card__narrative">{{ p.narrative }}</p>
+            {% if p.tagline != blank %}
+            <p class="project-card__narrative">{{ p.tagline }}</p>
             {% endif %}
-            {% if p.skills.size > 0 %}
+            {% if p.profileSkills.size > 0 %}
             <div class="project-card__skills">
-              {% for skill in p.skills %}
+              {% for skill in p.profileSkills %}
               <span class="skill-chip">{{ skill }}</span>
               {% endfor %}
             </div>

package/dist/render/templates/parallax/styles.css CHANGED Viewed

@@ -755,7 +755,7 @@ body { background: var(--px-bg); color: var(--px-text); }
   color: var(--px-accent);
 }
 .stats-bar__label {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   color: var(--px-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.08em;

package/dist/render/templates/parchment/portfolio.liquid CHANGED Viewed

@@ -106,12 +106,12 @@
           <h3 class="project-card__title">
             <a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a>
           </h3>
-          {% if p.narrative %}
-          <p class="project-card__narrative">{{ p.narrative }}</p>
+          {% if p.tagline != blank %}
+          <p class="project-card__narrative">{{ p.tagline }}</p>
           {% endif %}
-          {% if p.skills.size > 0 %}
+          {% if p.profileSkills.size > 0 %}
           <div class="project-card__skills">
-            {% for skill in p.skills %}
+            {% for skill in p.profileSkills %}
             <span class="skill-tag">{{ skill }}</span>
             {% endfor %}
           </div>

package/dist/render/templates/parchment/styles.css CHANGED Viewed

@@ -367,7 +367,7 @@
 }
 .parchment .margin-stat__label {
   font-family: var(--parch-font-mono);
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   color: var(--parch-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.1em;
@@ -397,7 +397,7 @@
 }
 .parchment .project-stat__label {
   font-family: var(--parch-font-mono);
-  font-size: 0.625rem;
+  font-size: 0.75rem;
   color: var(--parch-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.1em;
@@ -427,7 +427,7 @@
 }
 .parchment .session-stats-row__label {
   font-family: var(--parch-font-mono);
-  font-size: 0.5625rem;
+  font-size: 0.75rem;
   color: var(--parch-text-tertiary);
   text-transform: uppercase;
   letter-spacing: 0.1em;

package/dist/render/templates/radar/portfolio.liquid CHANGED Viewed

@@ -82,13 +82,13 @@
       <a class="portfolio-card" href="/{{ user.username }}/{{ p.slug }}">
         <div class="portfolio-card__bar portfolio-card__bar--cyan"></div>
         <div class="portfolio-card__title">{{ p.title }}</div>
-        {% if p.narrative != blank %}
-        <div class="portfolio-card__desc">{{ p.narrative }}</div>
+        {% if p.tagline != blank %}
+        <div class="portfolio-card__desc">{{ p.tagline }}</div>
         {% endif %}
         <div class="portfolio-card__meta">{{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | formatLoc }} LOC</div>
-        {% if p.skills.size > 0 %}
+        {% if p.profileSkills.size > 0 %}
         <div class="portfolio-card__skills">
-          {% for skill in p.skills %}
+          {% for skill in p.profileSkills %}
           <span class="chip">{{ skill }}</span>
           {% endfor %}
         </div>

package/dist/render/templates/radar/styles.css CHANGED Viewed

@@ -249,7 +249,7 @@ body { background: var(--surface); color: var(--on-surface); }
 .radar .portfolio-stat__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);
@@ -334,7 +334,7 @@ body { background: var(--surface); color: var(--on-surface); }
   font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.2;
-  padding: 0.125rem 0.5rem;
+  padding: 0.25rem 0.5rem;
   border-radius: var(--radius-sm);
   background: var(--accent-faint);
   color: var(--accent);
@@ -436,7 +436,7 @@ body { background: var(--surface); color: var(--on-surface); }
 }
 .radar .stat-card__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);
@@ -730,7 +730,7 @@ body { background: var(--surface); color: var(--on-surface); }
 }
 .radar .stat-card-sm__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);

package/dist/render/templates/showcase/portfolio.liquid CHANGED Viewed

@@ -96,17 +96,17 @@
         <a href="/{{ user.username }}/{{ p.slug }}" class="sc-project-card sc-stagger" style="display: block; margin-bottom: 0.75rem;">
           <div class="sc-project-card__accent-bar" style="background: var(--accent);"></div>
           <div class="sc-project-card__title">{{ p.title }}</div>
-          {% if p.narrative != blank %}
-          <p class="sc-project-card__narrative">{{ p.narrative }}</p>
+          {% if p.tagline != blank %}
+          <p class="sc-project-card__narrative">{{ p.tagline }}</p>
           {% endif %}
           <div class="sc-project-card__meta">
             <span>{{ p.totalSessions }} sessions</span>
             <span>{{ p.totalDurationMinutes | formatDuration }}</span>
             <span>{{ p.totalLoc | localeNumber }} LOC</span>
           </div>
-          {% if p.skills.size > 0 %}
+          {% if p.profileSkills.size > 0 %}
           <div class="sc-project-card__skills">
-            {% for skill in p.skills limit: 6 %}
+            {% for skill in p.profileSkills %}
             <span class="sc-skill-chip">{{ skill }}</span>
             {% endfor %}
           </div>

package/dist/render/templates/showcase/styles.css CHANGED Viewed

@@ -80,7 +80,7 @@ body { background: var(--bg); color: var(--text); }
   font-family: var(--font-body);
   color: var(--text);
   background: var(--bg);
-  line-height: 1.5;
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -299,7 +299,7 @@ body { background: var(--bg); color: var(--text); }
 }
 .sc-hero-stat__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 400;
   color: var(--text-3);
   letter-spacing: 0.08em;
@@ -350,7 +350,7 @@ body { background: var(--bg); color: var(--text); }
 }
 .sc-section-label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 400;
   color: var(--text-3);
   letter-spacing: 0.08em;
@@ -605,7 +605,7 @@ body { background: var(--bg); color: var(--text); }
 }
 .sc-stat-card__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   font-weight: 400;
   color: var(--text-3);
   letter-spacing: 0.08em;
@@ -692,7 +692,7 @@ body { background: var(--bg); color: var(--text); }
 .sc-decision-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
 .sc-phase-label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   color: var(--accent);
   text-transform: uppercase;
   letter-spacing: 0.08em;
@@ -782,7 +782,7 @@ body { background: var(--bg); color: var(--text); }
 .sc-phase-item:nth-child(4) .sc-phase-dot { transition-delay: 850ms; }
 .sc-phase-number {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   color: var(--accent);
   letter-spacing: 0.08em;
   text-transform: uppercase;
@@ -919,7 +919,7 @@ body { background: var(--bg); color: var(--text); }
 }
 .sc-meta-item__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: 12px;
   color: var(--text-3);
   text-transform: uppercase;
   letter-spacing: 0.08em;

package/dist/render/templates/signal/portfolio.liquid CHANGED Viewed

@@ -115,8 +115,8 @@
             <tr>
               <td>
                 <div class="project-name"><a href="/{{ user.username }}/{{ p.slug }}">{{ p.title }}</a></div>
-                {% if p.narrative != blank %}
-                <div class="project-narrative">{{ p.narrative }}</div>
+                {% if p.tagline != blank %}
+                <div class="project-narrative">{{ p.tagline }}</div>
                 {% endif %}
               </td>
               <td class="stat-mono">{{ p.totalSessions }}</td>
@@ -145,9 +145,9 @@
                 {% endif %}
               </td>
               <td>
-                {% if p.skills.size > 0 %}
+                {% if p.profileSkills.size > 0 %}
                 <div class="skill-badges">
-                  {% for skill in p.skills %}
+                  {% for skill in p.profileSkills %}
                   <span class="skill-badge strong">{{ skill }}</span>
                   {% endfor %}
                 </div>

package/dist/render/templates/signal/styles.css CHANGED Viewed

@@ -35,8 +35,8 @@ body { background: var(--bg); color: var(--fg); }
   font-family: var(--font-body);
   color: var(--fg);
   background: var(--bg);
-  line-height: 1.5;
-  font-size: 14px;
+  line-height: 1.6;
+  font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -157,7 +157,7 @@ body { background: var(--bg); color: var(--fg); }
 }
 .signal .stat-label {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--fg-dim);
@@ -182,7 +182,7 @@ body { background: var(--bg); color: var(--fg); }
   margin-bottom: 2px;
 }
 .signal.heyiam-session .stat-label {
-  font-size: 9px;
+  font-size: 12px;
 }
 .signal .stat-cell--leverage-group {
@@ -392,7 +392,7 @@ body { background: var(--bg); color: var(--fg); }
 }
 .signal .nav-links a {
   font-family: var(--font-mono);
-  font-size: 12px;
+  font-size: 14px;
   color: var(--fg-muted);
   text-decoration: none;
   padding: 4px 10px;

package/dist/render/templates/strata/portfolio.liquid CHANGED Viewed

@@ -79,8 +79,8 @@
         <a class="strata-project-card" href="/{{ user.username }}/{{ p.slug }}" aria-label="{{ p.title }} project">
           <div class="strata-project-card__accent" style="background: var(--strata-accent);"></div>
           <div class="strata-project-card__title">{{ p.title }}</div>
-          {% if p.narrative %}
-          <div class="strata-project-card__desc">{{ p.narrative }}</div>
+          {% if p.tagline != blank %}
+          <div class="strata-project-card__desc">{{ p.tagline }}</div>
           {% endif %}
           <div class="strata-project-card__meta">{{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | formatLoc }} LOC</div>
           {% if p.sourceCounts.size > 0 %}
@@ -92,9 +92,9 @@
           </div>
           <div class="strata-project-card__source">{% for sc in p.sourceCounts %}{% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}{{ sc.tool }} {{ pct }}%{% unless forloop.last %} &middot; {% endunless %}{% endfor %}</div>
           {% endif %}
-          {% if p.skills.size > 0 %}
+          {% if p.profileSkills.size > 0 %}
           <div class="strata-project-card__chips">
-            {% for skill in p.skills %}
+            {% for skill in p.profileSkills %}
             <span class="strata-project-card__chip">{{ skill }}</span>
             {% endfor %}
           </div>

package/dist/render/templates/strata/styles.css CHANGED Viewed

@@ -63,7 +63,7 @@ body {
   font-family: var(--strata-font-body);
   color: var(--strata-text);
   background: var(--strata-bg);
-  line-height: 1.5;
+  line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -290,7 +290,7 @@ a:focus-visible {
 }
 .strata-agg-stat__label {
   font-family: var(--strata-font-mono);
-  font-size: 10px;
+  font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   color: var(--strata-text-tertiary);
@@ -444,7 +444,7 @@ a:focus-visible {
 }
 .strata-stat__label {
   font-family: var(--strata-font-mono);
-  font-size: 10px;
+  font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 0.08em;

package/dist/render/templates/styles.css CHANGED Viewed

@@ -30,6 +30,17 @@
   --font-body: 'Inter', sans-serif;
   --font-mono: 'IBM Plex Mono', monospace;
+  /* Type scale — xs is the WCAG-driven readable floor for labels/meta.
+     Templates may override individual sizes for identity, but should
+     reference these tokens before introducing new literals. */
+  --font-size-xs:   0.75rem;   /* 12px — labels, meta, caption */
+  --font-size-sm:   0.875rem;  /* 14px — small body, dense rows */
+  --font-size-base: 1rem;      /* 16px — body */
+  --font-size-lg:   1.125rem;  /* 18px — subhead */
+  --font-size-xl:   1.25rem;   /* 20px — heading */
+  --font-size-2xl:  1.5rem;    /* 24px — section heading */
+  --font-size-3xl:  2rem;      /* 32px — page title */
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
 }
@@ -107,13 +118,13 @@ a:hover { text-decoration: underline; }
 }
 .section-header__title {
   font-family: var(--font-display);
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   font-weight: 600;
   color: var(--on-surface);
 }
 .section-header__meta {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);
@@ -145,7 +156,7 @@ a:hover { text-decoration: underline; }
 }
 .stat-card__value--sm {
-  font-size: 1.25rem;
+  font-size: var(--font-size-xl);
 }
 .stat-grid {
@@ -162,7 +173,7 @@ a:hover { text-decoration: underline; }
 }
 .stat-card__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);
@@ -170,7 +181,7 @@ a:hover { text-decoration: underline; }
 }
 .stat-card__value {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: var(--font-size-2xl);
   font-weight: 700;
   color: var(--on-surface);
 }
@@ -184,7 +195,7 @@ a:hover { text-decoration: underline; }
   font-family: var(--font-mono);
   font-size: 11px;
   line-height: 1.2;
-  padding: 0.125rem 0.5rem;
+  padding: 0.25rem 0.5rem;
   border-radius: var(--radius-sm);
   background: var(--surface-low);
   color: var(--on-surface-variant);
@@ -210,7 +221,7 @@ a:hover { text-decoration: underline; }
 .project-title {
   font-family: var(--font-display);
-  font-size: 1.25rem;
+  font-size: var(--font-size-xl);
   font-weight: 700;
   color: var(--on-surface);
   margin-bottom: 0.25rem;
@@ -224,7 +235,7 @@ a:hover { text-decoration: underline; }
 }
 .project-link {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
   color: var(--primary);
   display: flex;
   align-items: center;
@@ -284,7 +295,7 @@ a:hover { text-decoration: underline; }
   text-align: left;
   padding: 0.5rem 0;
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--outline);
@@ -335,7 +346,7 @@ a:hover { text-decoration: underline; }
 }
 .session-card__meta {
   color: var(--on-surface-variant);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
 }
 .session-card__skills { margin-top: 0.5rem; }
@@ -348,13 +359,13 @@ a:hover { text-decoration: underline; }
 }
 .note__title {
   font-family: var(--font-body);
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--on-surface);
   margin-bottom: 0.25rem;
 }
 .note__body {
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   color: var(--on-surface-variant);
   line-height: 1.5;
 }
@@ -395,7 +406,7 @@ a:hover { text-decoration: underline; }
 }
 .phase-timeline__label {
   font-family: var(--font-mono);
-  font-size: 0.6875rem;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);
@@ -410,7 +421,7 @@ a:hover { text-decoration: underline; }
 }
 .export-footer__text {
   font-family: var(--font-mono);
-  font-size: 10px;
+  font-size: var(--font-size-xs);
   color: var(--on-surface-variant);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -438,7 +449,7 @@ a:hover { text-decoration: underline; }
 .sidebar-section { margin-bottom: 1.5rem; }
 .sidebar-section__heading {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--outline);
@@ -457,7 +468,7 @@ a:hover { text-decoration: underline; }
 }
 .tool-list__name, .file-list__path {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
   color: var(--on-surface);
   overflow: hidden;
   text-overflow: ellipsis;
@@ -465,7 +476,7 @@ a:hover { text-decoration: underline; }
 }
 .tool-list__count {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
   color: var(--on-surface-variant);
 }
 .file-list__adds { color: var(--green); font-family: var(--font-mono); font-size: 0.6875rem; }
@@ -476,7 +487,7 @@ a:hover { text-decoration: underline; }
 .breadcrumb {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
   color: var(--on-surface-variant);
   margin-bottom: 1rem;
 }
@@ -486,7 +497,7 @@ a:hover { text-decoration: underline; }
 .session-header { margin-bottom: 1.5rem; }
 .session-header__title {
   font-family: var(--font-display);
-  font-size: 1.5rem;
+  font-size: var(--font-size-2xl);
   font-weight: 700;
   color: var(--on-surface);
   margin-bottom: 0.5rem;
@@ -500,11 +511,11 @@ a:hover { text-decoration: underline; }
 }
 .session-header__date {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
 }
 .session-header__source {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
   background: var(--surface-low);
   padding: 0.125rem 0.5rem;
   border-radius: var(--radius-sm);
@@ -521,7 +532,7 @@ a:hover { text-decoration: underline; }
 .session-header__devtake p { margin: 0; }
 .session-header__context {
   color: var(--on-surface-variant);
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   margin: 0.75rem 0;
 }
@@ -537,13 +548,13 @@ a:hover { text-decoration: underline; }
 }
 .stat__value {
   font-family: var(--font-display);
-  font-size: 1.125rem;
+  font-size: var(--font-size-lg);
   font-weight: 700;
   color: var(--on-surface);
 }
 .stat__label {
   font-family: var(--font-mono);
-  font-size: 9px;
+  font-size: var(--font-size-xs);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--on-surface-variant);
@@ -560,7 +571,7 @@ a:hover { text-decoration: underline; }
 }
 .content-section__heading {
   font-family: var(--font-display);
-  font-size: 1rem;
+  font-size: var(--font-size-base);
   font-weight: 600;
   color: var(--on-surface);
   margin-bottom: 0.75rem;
@@ -591,7 +602,7 @@ a:hover { text-decoration: underline; }
 .beat:last-child { border-bottom: none; }
 .beat__number {
   font-family: var(--font-mono);
-  font-size: 0.75rem;
+  font-size: var(--font-size-xs);
   color: var(--primary);
   font-weight: 600;
   min-width: 1.5rem;
@@ -601,7 +612,7 @@ a:hover { text-decoration: underline; }
 .beat__content { flex: 1; min-width: 0; }
 .beat__title {
   font-family: var(--font-display);
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   font-weight: 600;
   color: var(--on-surface);
 }
@@ -627,7 +638,7 @@ a:hover { text-decoration: underline; }
 }
 .qa-pair__answer {
   color: var(--on-surface-variant);
-  font-size: 0.875rem;
+  font-size: var(--font-size-sm);
   line-height: 1.5;
 }