contining modify on h1

resources/css/index.css

@@ -15,7 +15,6 @@ body {
   position: relative;  /* allows overlay title */
   margin: 0;
   padding: 0;
-  /* Do NOT set line-height:0 here or the H1 may vanish */
 }
 .site-header img {
   display: block;      /* removes inline image gap */
@@ -23,41 +22,40 @@ body {
   height: auto;
 }
 
-/* Overlay title on the banner */
-.site-title {
-  font-size: clamp(2rem, 4vw + 1rem, 6rem);
-  line-height: 1;
+/* Readability overlay for bright images (subtle) */
+.site-header::after {
+  content: "";
   position: absolute;
-  left: 50%;
-  bottom: 10%;                     /* nudge higher/lower as needed */
-  transform: translateX(-50%);
-  margin: 0;
+  inset: 0;
+  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);
+  pointer-events: none;
+}
+
+/* Overlay title on the banner (desktop defaults) */
+.site-title {
+  font-family: 'Iceland', sans-serif;
+  font-size: clamp(3rem, 6vw, 6rem);       /* ~48px–96px */
   text-align: center;
+  color: #ffd700;                           /* gold */
+  margin: 0;
+  text-shadow: 0 4px 12px rgba(0,0,0,0.6);  /* elegant shadow for depth */
+
+  /* overlay positioning */
+  position: absolute;
+  left: 35%;                                /* your desktop tweak */
+  bottom: 3%;                               /* your desktop tweak */
+  transform: translateX(-50%);
   z-index: 1;
 
-  /* start hidden; animate in and stay */
+  /* fade-in animation */
   opacity: 0;
-  animation: fadeSlideIn 1.2s ease-out forwards, goldShine 4s ease-in-out infinite;
-  animation-delay: 0s, 1.2s;
-
-  /* gold shine */
-  background: linear-gradient(90deg, #b8860b, #ffd700, #b8860b);
-  background-size: 200% auto;
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
-  -webkit-text-fill-color: transparent;
-  text-shadow: 0 1px 2px rgba(0,0,0,.35); /* subtle contrast on light banner zones */
+  animation: fadeIn 1s ease-out forwards;
 }
 
-/* Keyframes */
-@keyframes fadeSlideIn {
-  0%   { opacity: 0; transform: translate(-50%, -16px); }
-  100% { opacity: 1; transform: translate(-50%, 0); }
-}
-@keyframes goldShine {
-  0%   { background-position: 200% center; }
-  100% { background-position: -200% center; }
+/* Absolute-positioned slide uses combined translate */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translate(-50%, -10px); }
+  to   { opacity: 1; transform: translate(-50%, 0); }
 }
 
 /* Sticky nav under header */
@@ -91,3 +89,45 @@ body {
 /* Content + footer */
 .content { max-width: 1000px; margin: 2rem auto; padding: 0 1rem 3rem; }
 .site-footer { text-align: center; color: #bdbdbd; padding: 1.5rem 1rem 3rem; }
+
+/* ---------------------------- */
+/* Responsive title adjustments */
+/* ---------------------------- */
+
+/* Tablet */
+@media (max-width: 1024px) {
+  .site-title {
+    left: 50%;                 /* center on tablet */
+    bottom: 8%;
+    font-size: clamp(2.5rem, 6vw, 5rem);
+  }
+}
+
+/* Mobile */
+@media (max-width: 640px) {
+  .site-title {
+    left: 50%;                 /* center on mobile */
+    bottom: 12%;               /* lift it for safe spacing */
+    font-size: clamp(2rem, 8vw, 3.25rem);
+    line-height: 1.05;
+    padding: 0 .25rem;         /* avoid edge clipping */
+  }
+
+  /* Optional: ensure banner has enough vertical room on short screens */
+  .site-header {
+    min-height: 40vh;
+  }
+}
+
+/* Very small phones */
+@media (max-width: 380px) {
+  .site-title {
+    bottom: 14%;
+    font-size: clamp(1.8rem, 9vw, 2.8rem);
+  }
+}
+
+/* Respect reduced motion preferences */
+@media (prefers-reduced-motion: reduce) {
+  .site-title { animation: none; opacity: 1; transform: translate(-50%, 0); }
+}