From c3e8e38a58baa3b2d3f2a4d1b14ebc92c791c8b7 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 14 Jul 2026 16:59:48 +0300
Subject: [PATCH] fix(theme): fluid nav-title size and section rhythm off clamp
 tokens

---
 .../Section/ui/SectionAccordion/SectionAccordion.tsx | 12 +++++++-----
 src/shared/styles/theme.css                          |  5 +++++
 .../ui/SectionsAccordion/SectionsAccordion.tsx       |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
index c6bd2dd..d02d582 100644
--- a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
+++ b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
@@ -38,10 +38,12 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
   return (
     <section id={id} className="scroll-mt-8">
       {isActive ? (
-        <div className="mb-6 sm:mb-12">
+        <div className="mb-section-gap">
           <ViewTransitionWrapper name="section-title">
-            <div className="mb-6 sm:mb-12">
-              <h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0">{heading}</h1>
+            <div className="mb-section-gap">
+              <h1 className="font-heading font-black text-xl sm:text-section-title leading-[1.2] mb-0 py-0.5">
+                {heading}
+              </h1>
             </div>
           </ViewTransitionWrapper>
           <ViewTransitionWrapper name="section-body">
@@ -52,9 +54,9 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
         <Link
           href={href}
           aria-label={heading}
-          className="block w-full text-left mb-1 py-1 sm:mb-3 sm:py-3 group border-b-0 hover:border-b-0"
+          className="block w-full text-left text-xl sm:text-nav-title py-0.5 group border-b-0 hover:border-b-0"
         >
-          <span className="block font-heading font-wonk font-black text-xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200">
+          <span className="block font-heading font-wonk font-black opacity-30 group-hover:opacity-60 transition-opacity duration-200">
             {heading}
           </span>
         </Link>
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index 6208b3c..8fde364 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -21,6 +21,8 @@
   --font-weight-normal: 400;
 
   --text-section-title: clamp(2rem, 7.5vw, 8rem);
+  /* Half of the active title so the active/inactive size ratio holds at every width */
+  --text-nav-title: clamp(1.25rem, 3.75vw, 4rem);
 
   /* === LINE HEIGHT === */
   --line-height-tight: 1.2;
@@ -127,7 +129,10 @@
   --container-section: var(--section-content-width);
   --spacing-footer: 5rem;
   --spacing-footer-wide: 4rem;
+  /* Active-section vertical rhythm — fluid so it tracks the clamp() title instead of jumping at sm */
+  --spacing-section-gap: clamp(1.5rem, 5vw, 3.25rem);
   --text-section-title: var(--text-section-title);
+  --text-nav-title: var(--text-nav-title);
 
   --shadow-brutal-xs: var(--shadow-brutal-xs);
   --shadow-brutal-sm: var(--shadow-brutal-sm);
diff --git a/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx b/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
index 106523a..73cffcd 100644
--- a/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
+++ b/src/widgets/SectionsAccordion/ui/SectionsAccordion/SectionsAccordion.tsx
@@ -28,7 +28,7 @@ export function SectionsAccordion({ sections, activeSlug, children }: Props) {
   const slots = Children.toArray(children);
 
   return (
-    <div className="space-y-0 sm:space-y-2">
+    <div>
       {sections.map((section, i) => (
         <SectionAccordion
           key={section.slug}