From b40ff4f588cec26d9e289a8699d4eedee15c0803 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 18 May 2026 14:02:03 +0300
Subject: [PATCH] fix: fluid section title with clamp() to prevent wrapping
 below 900px

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

diff --git a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
index 6e33bee..3d77c04 100644
--- a/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
+++ b/src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx
@@ -42,8 +42,8 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
           <ViewTransitionWrapper name="section-content">
             <div className="mb-16">
               <h1
-                className="font-heading font-black text-5xl leading-[1.2] mb-0"
-                style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
+                className="font-heading font-black leading-[1.2] mb-0"
+                style={{ fontSize: 'var(--text-section-title)', fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
               >
                 {heading}
               </h1>
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index 5be9f89..cb30460 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -20,6 +20,9 @@
   --font-weight-body: 600;
   --font-weight-normal: 400;
 
+  /* Fluid section title: scales from 2rem at ~267px to 8rem at ~1707px */
+  --text-section-title: clamp(2rem, 7.5vw, 8rem);
+
   /* === LINE HEIGHT === */
   --line-height-tight: 1.2;
   --line-height-normal: 1.5;