src/entities/Section/ui/SectionAccordion/SectionAccordion.tsx

@@ -33,6 +33,8 @@ interface SectionAccordionProps {
  * Accordion-style section that collapses to a navigation link when inactive.
  */
 export function SectionAccordion({ number, title, id, isActive, href, children }: SectionAccordionProps) {
+  const heading = `${number}. ${title}`;
+
   return (
     <section id={id} className="scroll-mt-8">
       {isActive ? (
@@ -43,7 +45,7 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
                 className="font-heading font-black text-5xl leading-[1.2] mb-0"
                 style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
               >
-                {number}. {title}
+                {heading}
               </h1>
             </div>
           </ViewTransitionWrapper>
@@ -52,13 +54,17 @@ export function SectionAccordion({ number, title, id, isActive, href, children }
           </ViewTransitionWrapper>
         </div>
       ) : (
-        <Link href={href} className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0">
+        <Link
-          <h2
+          href={href}
-            className="font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"
+          aria-label={heading}
+          className="block w-full text-left mb-3 py-3 group border-b-0 hover:border-b-0"
+        >
+          <span
+            className="block font-heading font-black text-2xl sm:text-3xl opacity-30 group-hover:opacity-60 transition-opacity duration-200"
             style={{ fontVariationSettings: "'WONK' 1, 'SOFT' 0" }}
           >
-            {number}. {title}
+            {heading}
-          </h2>
+          </span>
         </Link>
       )}
     </section>

src/shared/styles/theme.css

@@ -273,17 +273,42 @@
 /* Editorial rich-text typography */
 .rich-text {
   max-width: 65ch;
-  line-height: 1.65;
+  line-height: var(--line-height-relaxed);
   font-feature-settings: "onum";
   hanging-punctuation: first last;
   text-wrap: pretty;
-  hyphens: auto;
 }
 
 .rich-text p + p {
   margin-top: 1.2em;
 }
 
+.rich-text ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 1em 0;
+}
+
+.rich-text ul li {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.65em;
+  align-items: start;
+  margin-top: 0.5em;
+}
+
+.rich-text ul li:first-child {
+  margin-top: 0;
+}
+
+.rich-text ul li::before {
+  content: "◆";
+  color: var(--blue);
+  font-size: 0.55em;
+  /* line-height matches parent so diamond centers within the first line box */
+  line-height: calc(var(--line-height-relaxed) / 0.55);
+}
+
 /* Cross-section view transition (navigation between sections) */
 ::view-transition-old(section-content) {
   animation-name: section-fade-out;

src/widgets/SkillsSection/ui/SkillsSection/SkillsSection.tsx

@@ -23,7 +23,7 @@ export default async function SkillsSection() {
     <div className="space-y-12 max-w-section">
       {Object.entries(categories).map(([category, items]) => (
         <div key={category} className="space-y-4">
-          <h3 className="text-xl font-bold uppercase tracking-widest opacity-50">{category}</h3>
+          <h3 className="text-xl font-bold uppercase tracking-widest opacity-60">{category}</h3>
           <div className="flex flex-wrap gap-3">
             {items.map((skill) => (
               <Badge key={skill.id}>{skill.name}</Badge>