/*
Theme Name: Songs in Dark Waters
Theme URI: https://thegloomysailor.com
Description: One-page bilingual maritime theme for The Gloomy Sailor.
Author: The Gloomy Sailor
Author URI: https://thegloomysailor.com
Template: twentytwentyfour
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: songsindarkwaters
*/

<!-- ⚓️ The Gloomy Sailor Footer -->
<footer id="gloomy-footer" class="punk-typewriter">
  <div class="footer-divider"></div>

  <div class="footer-content">
    <div class="footer-logo">
      <h2>⚓ The Gloomy Sailor</h2>
      <p>Drifting through tides of sound and shadow</p>
    </div>

    <div class="footer-socials">
      <a href="https://www.facebook.com/songsindarkwaters/" target="_blank">Facebook</a>
      <a href="https://www.instagram.com/songsindarkwaters/" target="_blank">Instagram</a>
      <a href="https://www.tiktok.com/@songsindarkwaters" target="_blank">TikTok</a>
      <a href="https://www.youtube.com/@SongsInDarkWaters" target="_blank">YouTube</a>
    </div>
  </div>

  <div class="footer-bottom">
    <p>© 2025 The Gloomy Sailor — Songs in Dark Waters. All rights adrift.</p>
  </div>
</footer>
body{
  background-color: var(--gloom-bg);
  color: var(--gloom-accent);
  font-family: "Open Sans", Arial, sans-serif;
}
a{ color: var(--gloom-accent); text-decoration: none; }
a:hover{ color: var(--gloom-blue-hover); }
.site-header{ background: rgba(0,0,0,0.6); position: fixed; top:0; width:100%; z-index:999; }
.site-logo { height:56px; display:inline-block; padding:8px 12px; }
.btn-gloom {
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border: 1px solid rgba(192,192,192,0.15);
  color: var(--gloom-accent);
  padding: 10px 18px;
  border-radius: var(--gloom-button-radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}
.btn-gloom:hover{
  transform: translateY(-2px);
}
.hero{
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-image: url('assets/hero-veil.jpg');
  background-size:cover;
  background-position:center;
  position: relative;
}
.hero:after{
  content: "";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(10,24,38,0.6), rgba(0,0,0,0.7));
}
.hero .hero-inner{ position:relative; z-index:2; max-width:1100px; padding:40px; }
.section { padding:60px 20px; }
.portfolio-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:18px; }
.card{
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  padding:16px;
  border-radius:12px;
}
/* Responsive tweaks */
@media (max-width:768px){
  .hero{ min-height:40vh; padding:30px 10px; }
  .site-logo{ height:44px; }
}