Hero and brand name visual hierarchy

- Hero: "Sabor Flow" large + "Da Nang" inline, smaller and muted
- Nav/footer brand: "SABOR FLOW" bold + "Da Nang" smaller and muted
- No line break between the two parts in either context

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

classes.html

@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -222,7 +222,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>

connect.html

@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -107,7 +107,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>

css/style.css

@@ -94,6 +94,13 @@ h3 { font-size: clamp(1rem, 2vw, 1.3rem); }
   letter-spacing: 0.12em;
   color: var(--text);
 }
+.nav-brand-city {
+  font-size: 0.75em;
+  font-weight: 400;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+  margin-left: 0.3em;
+}
 
 .nav-links { display: flex; align-items: center; }
 .nav-links a {
@@ -380,6 +387,15 @@ section { padding: 5rem 0; }
   color: var(--text);
   margin-bottom: 0.35rem;
 }
+.hero-title-city {
+  display: inline;
+  font-size: 0.28em;
+  font-weight: 400;
+  letter-spacing: 0.32em;
+  text-transform: uppercase;
+  color: var(--muted);
+  margin-left: 0.5em;
+}
 
 .hero-rule { width: 36px; height: 1px; background: var(--orange); margin: 1.5rem auto; }
 
@@ -653,6 +669,7 @@ section { padding: 5rem 0; }
 .footer-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem; }
 .footer-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
 .footer-brand-name { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.12em; color: var(--text); }
+.footer-brand-city { font-size: 0.75em; font-weight: 400; letter-spacing: 0.08em; color: var(--muted); margin-left: 0.3em; }
 .footer-tagline { color: var(--muted); font-size: 0.72rem; }
 
 .footer-nav { display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }

festivals.html

@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -150,7 +150,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>

index.html

@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -35,7 +35,7 @@
     <div class="hero-content">
       <p class="hero-eyebrow">Da Nang &middot; Vietnam</p>
       <img src="assets/logo.jpg" alt="Sabor Flow Da Nang" class="hero-logo">
-      <h1 class="hero-title">Sabor Flow Da Nang</h1>
+      <h1 class="hero-title">Sabor Flow<span class="hero-title-city">Da Nang</span></h1>
       <div class="hero-rule"></div>
       <p class="hero-subtitle">Latin Dance Community</p>
       <div class="hero-ctas">
@@ -143,7 +143,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>

schedule.html

@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -67,7 +67,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>

studios.html

@@ -14,7 +14,7 @@
     <div class="nav-container">
       <a href="index.html" class="nav-brand">
         <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-        <span class="nav-brand-name">SABOR FLOW DA NANG</span>
+        <span class="nav-brand-name">SABOR FLOW <span class="nav-brand-city">Da Nang</span></span>
       </a>
       <button class="nav-hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">
         <span></span><span></span><span></span>
@@ -159,7 +159,7 @@
         <div>
           <a href="index.html" class="footer-brand">
             <img src="assets/logo.jpg" alt="SABOR FLOW DA NANG">
-            <span class="footer-brand-name">SABOR FLOW DA NANG</span>
+            <span class="footer-brand-name">SABOR FLOW <span class="footer-brand-city">Da Nang</span></span>
           </a>
           <p class="footer-tagline">Da Nang's Latin dance community</p>
         </div>