<!--
======================================================
jhElmEr WEBSITE
MOTHER MUSIC ARTICLE TEMPLATE — VERSION 2.1
======================================================

FILE:
articles/article-music.html

PURPOSE:
Ito ang permanenteng mother template para sa lahat ng
Music articles ng jhElmEr website.

Ang bawat Music article ay nagsisilbing permanenteng
public archive ng isang original song—kasama ang cover,
audio, konteksto ng kanta, at buong lyrics.

Huwag direktang gamitin o baguhin ang mother file para
sa isang published Music article.

------------------------------------------------------
PUBLISHING WORKFLOW
------------------------------------------------------

1. Duplicate ang article-music.html sa loob din ng
   /articles/ folder.

2. Palitan ang filename ng duplicate.

   Halimbawa:

   music-hindi-tahimik.html
   music-song-title.html

3. Palitan lamang ang sumusunod:

   • Browser page title
   • Meta description
   • Cover image filename
   • Cover image alt text
   • MP3 filename
   • Audio accessibility label
   • Story / context paragraphs
   • Song title bago ang Lyrics
   • Lyrics

4. Ilagay ang cover image sa:

   articles/images/

5. Ilagay ang MP3 file sa:

   articles/audio/

6. Idagdag ang bagong kanta sa Music Archive:

   ../all-music.html

7. Gawin itong Featured Song sa:

   ../music.html

   Habang hindi pa kumpleto ang unang 10 kanta:
   ang pinakabagong uploaded song ang Featured Song.

   Kapag kumpleto na ang 10 kanta:
   ibalik bilang permanenteng Featured Song ang
   official jhElmEr Theme Song.

8. Hindi kailanman inilalagay ang Music article sa
   Homepage Latest Article.

   Ang Homepage Latest Article ay para lamang sa:

   • Civic Explainers
   • Text Slogans

9. Siguraduhing pareho ang Music article link sa:

   • Music Category Page
   • Complete Music Archive

10. Test bago mag-commit:

   • Header navigation
   • Header logo clickable scope
   • Back navigation
   • Cover image
   • Audio playback
   • Story / context
   • Song title bago ang Lyrics
   • Lyrics
   • Mobile portrait
   • Mobile landscape
   • Desktop

------------------------------------------------------
DO NOT MODIFY
------------------------------------------------------

• Header structure
• Main navigation structure
• Back navigation structure
• Article layout structure
• CSS class names
• Typography system
• Responsive behavior
• Existing ../ navigation paths

------------------------------------------------------
IMPORTANT PATH RULE
------------------------------------------------------

Ang mother template at lahat ng published Music
articles ay nasa loob ng /articles/ folder.

Kaya ang links papunta sa root files ay gumagamit ng:

../

Ang cover images ay inilalagay sa:

articles/images/

Kaya ang image path sa Music article ay:

images/filename.png
images/filename.jpg
images/filename.webp

Ang MP3 files ay inilalagay sa:

articles/audio/

Kaya ang audio path sa Music article ay:

audio/filename.mp3

HUWAG GAMITIN ANG:

articles/audio/filename.mp3

Dahil nasa loob na ng /articles/ folder ang Music
article. Kapag ginamit ang articles/audio/, hahanapin
ng browser ang maling path na:

articles/articles/audio/filename.mp3

Panatilihin ang eksaktong filename, capitalization,
spacing, at original file extension.

------------------------------------------------------
MUSIC ARTICLE STRUCTURE
------------------------------------------------------

COVER IMAGE
↓
AUDIO PLAYER
↓
STORY / CONTEXT
↓
SONG TITLE
↓
LYRICS

Magkasama sa iisang media card ang Cover Image at
Audio Player upang maging tuloy-tuloy ang visual flow.

Walang heading ang Story / Context section.

Ang Song Title ay inilalagay bago ang Lyrics upang
hindi maulit agad ang pamagat na makikita na sa cover.

Walang Call to Action.

Walang Like, Comment, Subscribe, o Share section.

Ang website ay permanenteng public archive at hindi
social-media engagement page.

======================================================
END OF DEVELOPER NOTES
======================================================
-->

<!DOCTYPE html>
<html lang="tl">

<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

 <meta
  name="description"
  content="Pakinggan ang original song na Iba ang Sigaw, Iba ang Galaw ng jhElmEr tungkol sa agwat ng salita at gawa, at basahin ang kuwento, konteksto, at buong lyrics nito."
>

  <title>Iba ang Sigaw, Iba ang Galaw | jhElmEr</title>

  <link rel="preconnect" href="https://fonts.googleapis.com">

  <link
    rel="preconnect"
    href="https://fonts.gstatic.com"
    crossorigin
  >

  <link
    href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap"
    rel="stylesheet"
  >

   <link
    rel="stylesheet"
    href="../main.css?v=3"
  >

  <style>
    /* =========================================================
       MUSIC ARTICLE PAGE — VERSION 2.1

       BLACK BRAND AREA
       CREAM CONTENT AREA

       COVER + AUDIO
       ↓
       STORY / CONTEXT
       ↓
       SONG TITLE
       ↓
       LYRICS
    ========================================================= */

    .music-article-page {
      min-height: 100vh;
      margin: 0;

      color: #242321;
      background: #f4f0e8;
    }

    .music-article-page,
    .music-article-page *,
    .music-article-page *::before,
    .music-article-page *::after {
      box-sizing: border-box;
    }

    /* =========================================================
       ARTICLE BACK NAVIGATION
    ========================================================= */

    .article-back-navigation {
      position: relative;
      z-index: 100;

      isolation: isolate;

      border-top:
        1px solid rgba(213, 173, 54, 0.12);

      border-bottom:
        1px solid rgba(213, 173, 54, 0.18);

      background: #090a0c;
    }

    .article-back-inner {
      width: 100%;
      max-width: 1180px;
      margin: 0 auto;
      padding: 20px 7%;

      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 16px;
    }

    .article-back-link {
      position: relative;
      z-index: 2;

      width: fit-content;
      min-height: 38px;

      display: inline-flex;
      align-items: center;
      gap: 9px;

      color:
        rgba(245, 241, 232, 0.68);

      font-size: 0.67rem;
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: 0.11em;
      text-decoration: none;
      text-transform: uppercase;

      transition:
        color 0.22s ease,
        transform 0.22s ease;
    }

    .article-back-link:hover,
    .article-back-link:focus-visible {
      color: #d5ad36;

      outline: none;

      transform:
        translateX(-3px);
    }

    .article-back-arrow {
      color: #d5ad36;

      font-size: 1rem;
      line-height: 1;
    }

    .article-back-divider {
      color:
        rgba(245, 241, 232, 0.22);

      font-size: 0.75rem;
      line-height: 1;
    }

    /* =========================================================
       ARTICLE MAIN AREA
    ========================================================= */

    .music-article-main {
      position: relative;

      width: 100%;
      min-height: 100vh;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 88% 17%,
          rgba(213, 173, 54, 0.08),
          transparent 26%
        ),
        radial-gradient(
          circle at 12% 72%,
          rgba(123, 30, 30, 0.045),
          transparent 24%
        ),
        #f4f0e8;
    }

    .music-article-main::before {
      content: "";

      position: absolute;
      top: 72px;
      right: -315px;

      width: 650px;
      height: 650px;

      border:
        1px solid rgba(213, 173, 54, 0.14);

      border-radius: 50%;

      pointer-events: none;
    }

    .music-article-main::after {
      content: "";

      position: absolute;
      top: 245px;
      right: -190px;

      width: 390px;
      height: 390px;

      border:
        1px solid rgba(213, 173, 54, 0.1);

      border-radius: 50%;

      pointer-events: none;
    }

    .article-container {
      position: relative;
      z-index: 2;

      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 70px 7% 112px;
    }

    /* =========================================================
       COVER + AUDIO MEDIA CARD
    ========================================================= */

    .article-media-card {
      width: 100%;
      margin: 0 0 50px;

      overflow: hidden;

      border:
        1px solid rgba(23, 23, 23, 0.11);

      border-radius: 18px;

      background: #111214;

      box-shadow:
        0 22px 55px rgba(22, 20, 16, 0.16);
    }

    /* =========================================================
       SONG COVER
    ========================================================= */

    .article-image-figure {
      width: 100%;
      margin: 0;
    }

    .article-image-frame {
      position: relative;

      width: 100%;

      overflow: hidden;

      background: #111214;
    }

    .article-image {
      width: 100%;
      max-width: 100%;
      height: auto;

      display: block;

      object-fit: contain;
    }

    /* =========================================================
       AUDIO PLAYER
    ========================================================= */

    .song-player-section {
      width: 100%;
      margin: 0;

      border-top:
        1px solid rgba(213, 173, 54, 0.22);
    }

    .song-player-shell {
      position: relative;

      width: 100%;
      padding: 27px 30px 29px;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 94% 18%,
          rgba(213, 173, 54, 0.1),
          transparent 32%
        ),
        #111214;
    }

    .song-player-shell::after {
      content: "";

      position: absolute;
      top: -80px;
      right: -68px;

      width: 170px;
      height: 170px;

      border:
        1px solid rgba(213, 173, 54, 0.13);

      border-radius: 50%;

      pointer-events: none;
    }

    .song-player-label {
      position: relative;
      z-index: 2;

      margin: 0 0 13px;

      color: #d5ad36;

      font-family:
        "Barlow Condensed",
        Arial,
        sans-serif;

      font-size: 0.79rem;
      font-weight: 800;
      line-height: 1.3;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .song-audio {
      position: relative;
      z-index: 2;

      width: 100%;
      height: 48px;

      display: block;
    }

    .audio-fallback {
      position: relative;
      z-index: 2;

      margin: 13px 0 0;

      color:
        rgba(245, 241, 232, 0.66);

      font-size: 0.78rem;
      line-height: 1.6;
    }

    /* =========================================================
       ARTICLE READING AREA
    ========================================================= */

    .article-reading-area {
      width: 100%;
      max-width: 790px;
      margin: 0 auto;
    }

    /* =========================================================
       STORY / CONTEXT
    ========================================================= */

    .article-body {
      color: #47443f;

      font-size: 1.04rem;
      font-weight: 400;
      line-height: 1.94;
    }

    .article-body p {
      margin: 0 0 1.65em;
    }

    .article-body p:last-child {
      margin-bottom: 0;
    }

    .article-body strong {
      color: #1d1c1a;
      font-weight: 700;
    }

    .article-body em {
      color: #35322e;
    }

    /* =========================================================
       LYRICS SECTION
    ========================================================= */

    .lyrics-section {
      width: 100%;
      margin-top: 54px;
      padding-top: 42px;

      border-top:
        1px solid rgba(23, 23, 23, 0.14);
    }

    .lyrics-song-title {
      margin: 0 0 13px;

      color: #171717;

      font-family:
        "Barlow Condensed",
        Arial,
        sans-serif;

      font-size:
        clamp(
          2.8rem,
          6vw,
          4.5rem
        );

      font-weight: 800;
      line-height: 0.92;
      letter-spacing: -0.024em;
      text-wrap: balance;
      text-transform: uppercase;
    }

    .lyrics-heading {
      margin: 0 0 34px;

      color: #9a7624;

      font-family:
        "Barlow Condensed",
        Arial,
        sans-serif;

      font-size: 0.84rem;
      font-weight: 800;
      line-height: 1.4;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }

    .lyrics-content {
      color: #393733;

      font-size: 1.03rem;
      font-weight: 500;
      line-height: 1.9;
    }

    .lyrics-stanza {
      margin: 0 0 2.25em;
    }

    .lyrics-stanza:last-child {
      margin-bottom: 0;
    }

    .lyrics-stanza p {
      margin: 0;
    }

    .lyrics-section-label {
      margin: 0 0 0.72em;

      color: #9a7624;

      font-family:
        "Barlow Condensed",
        Arial,
        sans-serif;

      font-size: 0.79rem;
      font-weight: 800;
      line-height: 1.35;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    /* =========================================================
       TABLET
    ========================================================= */

    @media (max-width: 1000px) {
      .article-container {
        max-width: 940px;
      }
    }

    /* =========================================================
       MOBILE
    ========================================================= */

    @media (max-width: 850px) {
      .article-back-inner {
        padding: 17px 30px;
      }

      .article-container {
        padding: 48px 30px 84px;
      }

      .article-media-card {
        margin-bottom: 42px;

        border-radius: 14px;

        box-shadow:
          0 17px 42px rgba(22, 20, 16, 0.14);
      }

      .song-player-shell {
        padding: 22px 23px 24px;
      }

      .song-player-label {
        margin-bottom: 11px;
      }

      .article-body {
        font-size: 0.98rem;
        line-height: 1.88;
      }

      .article-body p {
        margin-bottom: 1.52em;
      }

      .lyrics-section {
        margin-top: 46px;
        padding-top: 35px;
      }

      .lyrics-song-title {
        margin-bottom: 11px;

        font-size:
          clamp(
            2.55rem,
            11vw,
            3.75rem
          );
      }

      .lyrics-heading {
        margin-bottom: 28px;
      }

      .lyrics-content {
        font-size: 0.98rem;
        line-height: 1.86;
      }

      .lyrics-stanza {
        margin-bottom: 2em;
      }
    }

    /* =========================================================
       SMALL MOBILE
    ========================================================= */

    @media (max-width: 430px) {
      .article-back-inner {
        padding: 14px 27px;

        align-items: flex-start;
        flex-direction: column;
        gap: 1px;
      }

      .article-back-divider {
        display: none;
      }

      .article-back-link {
        min-height: 34px;

        font-size: 0.62rem;
        letter-spacing: 0.08em;
      }

      .article-container {
        padding: 40px 27px 72px;
      }

      .article-media-card {
        margin-bottom: 36px;

        border-radius: 12px;
      }

      .song-player-shell {
        padding: 19px 17px 21px;
      }

      .song-player-label {
        font-size: 0.71rem;
        letter-spacing: 0.11em;
      }

      .song-audio {
        height: 44px;
      }

      .audio-fallback {
        font-size: 0.72rem;
      }

      .article-body {
        font-size: 0.95rem;
        line-height: 1.84;
      }

      .lyrics-section {
        margin-top: 40px;
        padding-top: 31px;
      }

      .lyrics-song-title {
        margin-bottom: 10px;

        font-size:
          clamp(
            2.35rem,
            12vw,
            3.25rem
          );
      }

      .lyrics-heading {
        margin-bottom: 25px;

        font-size: 0.75rem;
      }

      .lyrics-content {
        font-size: 0.95rem;
        line-height: 1.83;
      }

      .lyrics-section-label {
        font-size: 0.72rem;
      }

      .lyrics-stanza {
        margin-bottom: 1.85em;
      }
    }

    /* =========================================================
       LANDSCAPE MOBILE
    ========================================================= */

    @media
      (min-width: 700px)
      and (max-width: 950px)
      and (max-height: 520px)
      and (orientation: landscape) {

      .article-back-inner {
        padding-top: 13px;
        padding-bottom: 13px;
      }

      .article-container {
        max-width: 850px;
        padding-top: 42px;
      }

      .article-media-card {
        width: 100%;
      }

      .article-image {
        width: 100%;
        max-width: 100%;
        height: auto;
      }

      .song-player-shell {
        padding: 21px 24px 23px;
      }

      .article-reading-area {
        max-width: 720px;
      }

      .lyrics-song-title {
        font-size:
          clamp(
            3rem,
            7vw,
            4.15rem
          );
      }
    }

    /* =========================================================
       REDUCED MOTION
    ========================================================= */

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        transition: none !important;
      }
    }
  </style>
</head>

<body class="music-article-page">

  <!-- ======================================================
       HEADER
  ======================================================= -->

  <header class="site-header">

    <a
      class="brand"
      href="../index.html"
      aria-label="jhElmEr homepage"
    >
      <img
        src="../header-logo.png"
        alt="jhElmEr Simpleng Tao"
      >
    </a>

    <button
      class="menu-toggle"
      type="button"
      aria-label="Open navigation menu"
      aria-expanded="false"
      aria-controls="main-navigation"
    >
      <span></span>
      <span></span>
      <span></span>
    </button>

    <nav
      class="main-nav"
      id="main-navigation"
      aria-label="Main navigation"
    >
      <a href="../index.html">
        Home
      </a>

      <a href="../civic-explainers.html">
        Civic Explainers
      </a>

      <a href="../text-slogan.html">
        Text Slogans
      </a>

      <a
        class="active"
        href="../music.html"
        aria-current="page"
      >
        Music
      </a>

      <a href="../about.html">
        About
      </a>

<a href="../contact.html">
  Contact
</a>

<a href="../privacy-policy.html">
  Privacy Policy
</a>
       
    </nav>

  </header>

  <!-- ======================================================
       ARTICLE BACK NAVIGATION
  ======================================================= -->

  <div
    class="article-back-navigation"
    role="navigation"
    aria-label="Music article return navigation"
  >

    <div class="article-back-inner">

      <a
        class="article-back-link"
        href="../music.html"
      >
        <span
          class="article-back-arrow"
          aria-hidden="true"
        >
          ←
        </span>

        <span>
          Music
        </span>
      </a>

      <span
        class="article-back-divider"
        aria-hidden="true"
      >
        /
      </span>

     <a
        class="article-back-link"
        href="../all-music.html"
      >
        <span
          class="article-back-arrow"
          aria-hidden="true"
        >
          ←
        </span>

        <span>
          Lahat ng Kanta
        </span>
      </a>

    </div>

  </div>

  <!-- ======================================================
       MUSIC ARTICLE
  ======================================================= -->

  <main class="music-article-main">

    <article class="article-container">

      <!-- ==================================================
           COVER IMAGE + AUDIO PLAYER

           COVER IMAGE:
           articles/images/

           AUDIO FILE:
           articles/audio/

           PALITAN ANG:
           • Image filename
           • Image alt text
           • MP3 filename
           • Audio aria-label
      =================================================== -->

      <div class="article-media-card">

        <!-- ===============================================
             COVER IMAGE
        ================================================ -->

        <figure class="article-image-figure">

          <div class="article-image-frame">

            <img
  class="article-image"
  src="images/music-iba-ang-sigaw-iba-ang-galaw.png"
  alt="Cover image ng original song na Iba ang Sigaw, Iba ang Galaw"
>

          </div>

        </figure>

        <!-- ===============================================
             AUDIO PLAYER

             TAMANG PATH:
             audio/song-title.mp3

             HUWAG GAMITIN:
             articles/audio/song-title.mp3
        ================================================ -->

        <section
  class="song-player-section"
  aria-label="Iba ang Sigaw, Iba ang Galaw audio player"
>

  <div class="song-player-shell">

    <p class="song-player-label">
      Original Song
    </p>

    <audio
      class="song-audio"
      controls
      preload="metadata"
      aria-label="Pakinggan ang Iba ang Sigaw, Iba ang Galaw"
    >
      <source
        src="audio/music-iba-ang-sigaw-iba-ang-galaw.mp3"
        type="audio/mpeg"
      >

      Hindi sinusuportahan ng browser mo ang
      HTML audio player.
    </audio>

    <p class="audio-fallback">
      Kapag hindi gumana ang audio player, tiyaking
      eksaktong tugma ang MP3 filename, extension,
      capitalization, at file path.
    </p>

  </div>

</section>

      </div>

      <!-- ==================================================
           ARTICLE READING AREA
      =================================================== -->

      <div class="article-reading-area">

        <!-- ===============================================
             STORY / CONTEXT

             WALANG SECTION HEADING

             PALITAN ANG MGA PARAGRAPH
        ================================================ -->

        <div class="article-body">

  <p>
    Maraming marunong magsalita. Maraming marunong
    magreklamo. Ngunit sa oras na kailangan ang
    pagkilos, doon lumalabas ang tunay na pagkakaiba.
  </p>

  <p>
    Ang <strong>IBA ANG SIGAW, IBA ANG GALAW</strong>
    ay isang original na awit tungkol sa agwat ng
    sinasabi at ginagawa. Hindi sapat ang malakas na
    boses kung walang kasamang paninindigan at gawa.
  </p>

  <p>
    Hindi ito para husgahan ang iba, kundi para
    simulan ang pagtatanong sa sarili:
    <strong>
      Magkatugma ba ang ating sinasabi at ang ating
      ginagawa?
    </strong>
  </p>

  <p>
    Kung may pagbabagong nais nating makita sa
    lipunan, nagsisimula ito sa bawat desisyong
    ginagawa natin araw-araw.
  </p>

</div>

        <!-- ===============================================
             SONG TITLE + LYRICS

             PALITAN ANG:
             • Song Title
             • Lahat ng sample lyrics

             Ang Song Title ay nasa bahaging ito upang hindi
             ito agad maulit sa ibabaw ng cover image.

             Gumamit ng isang .lyrics-stanza para sa bawat:

             • Intro
             • Verse
             • Pre-Chorus
             • Chorus
             • Bridge
             • Outro

             Optional ang section labels.
        =============================================== -->
<section
  class="lyrics-section"
  aria-labelledby="song-lyrics-title"
>

  <h1
    class="lyrics-song-title"
    id="song-lyrics-title"
  >
    IBA ANG SIGAW, IBA ANG GALAW
  </h1>

  <p class="lyrics-heading">
    Lyrics
  </p>

  <div class="lyrics-content">

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Intro
      </p>

      <p>
        Walang sigaw… pero may nangyayari
      </p>

      <p>
        Walang ingay… pero may nawawala
      </p>

      <p>
        Pareho ang bibig…
      </p>

      <p>
        Magkaiba ang galaw
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Verse 1
      </p>

      <p>
        Malakas ang boses—pero walang gawa
      </p>

      <p>
        Reklamo sa taas—pero tahimik sa baba
      </p>

      <p>
        Halos lahat may puna—halos lahat may alam
      </p>

      <p>
        Pero pag oras na—biglang nawawalan
      </p>

      <br>

      <p>
        May post, may share—may opinion sa feed
      </p>

      <p>
        Pero sa realidad—kulang sa lead
      </p>

      <p>
        Galit sa sistema—galit sa mali
      </p>

      <p>
        Pero sariling galaw—hindi masuri
      </p>

      <br>

      <p>
        Hindi ito ingay—kung walang direksyon
      </p>

      <p>
        Hindi ito laban—kung puro emosyon
      </p>

      <p>
        Kung salita lang—ang kayang ibigay
      </p>

      <p>
        Huwag mong tawaging pagbabago ang sigaw mo sa buhay
      </p>

      <br>

      <p>
        Kung ikaw 'to—hindi ka nakikinig, tinatamaan ka
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Pre-Chorus
      </p>

      <p>
        Naririnig ka… pero hindi ka gumagalaw
      </p>

      <p>
        Nakikita ka… pero hindi ka tumatayo
      </p>

      <p>
        Kung pareho lang ang sinasabi ng lahat
      </p>

      <p>
        Bakit iba ang nangyayari sa galaw
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Chorus
      </p>

      <p>
        Iba ang sigaw—iba ang galaw
      </p>

      <p>
        Hindi pareho ang sinasabi't ginagawa mo araw-araw
      </p>

      <p>
        Iba ang laban—iba ang galaw
      </p>

      <p>
        Kung walang ginagawa—walang mababago
      </p>

      <p>
        Kahit ubusin mo pa ang sigaw mo
      </p>

      <br>

      <p>
        Iba ang sigaw—iba ang galaw
      </p>

      <p>
        Hindi sapat ang salita kung walang bigat ang hakbang
      </p>

      <p>
        Kung gusto mong may mangyari
      </p>

      <p>
        Simulan mo sa galaw, hindi sa sigaw
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Verse 2
      </p>

      <p>
        Crisis sa balita—pero buhay tuloy
      </p>

      <p>
        Reklamo sa presyo—pero gastos buo
      </p>

      <p>
        Marami ang apektado—marami ang may hinaing
      </p>

      <p>
        Pero lifestyle pareho—walang nagbabago sa tingin
      </p>

      <p>
        Galit sa krisis—pero komportable sa nakasanayan
      </p>

      <br>

      <p>
        May alam sa problema—alam ang dahilan
      </p>

      <p>
        Pero sariling galaw—hirap pangunahan
      </p>

      <p>
        Gusto ng solusyon—gusto ng ayos
      </p>

      <p>
        Pero disiplina mismo—hindi maayos
      </p>

      <br>

      <p>
        Hindi lahat ng ingay—may saysay
      </p>

      <p>
        Hindi lahat ng galit—may patutunguhan sa tunay
      </p>

      <p>
        Kung hindi mo kayang ayusin ang sarili mong hakbang
      </p>

      <p>
        Paano mo babaguhin ang mas malaking laban
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Bridge
      </p>

      <p>
        Hindi ito laban ng salita
      </p>

      <p>
        Hindi ito paunahan ng sigaw
      </p>

      <p>
        Kung walang bigat ang ginagawa mo
      </p>

      <p>
        Kasama ka sa dahilan kung bakit walang nagbabago
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Final Chorus
      </p>

      <p>
        Iba ang sigaw—iba ang galaw
      </p>

      <p>
        Hindi pareho ang sinasabi't ginagawa mo araw-araw
      </p>

      <p>
        Iba ang laban—iba ang galaw
      </p>

      <p>
        Kung walang ginagawa—walang mababago
      </p>

      <p>
        Kahit ubusin mo pa ang sigaw mo
      </p>

      <br>

      <p>
        Iba ang sigaw—iba ang galaw
      </p>

      <p>
        Hindi sapat ang salita kung walang bigat ang hakbang
      </p>

      <p>
        Kung gusto mong may mangyari
      </p>

      <p>
        Simulan mo sa galaw, hindi sa sigaw
      </p>

    </div>

    <div class="lyrics-stanza">

      <p class="lyrics-section-label">
        Outro
      </p>

      <p>
        Hindi ang sigaw ang naaalala
      </p>

      <p>
        Kundi kung may ginawa ka habang sumisigaw
      </p>

    </div>

  </div>

</section>

      </div>

    </article>

  </main>

  <!-- ======================================================
       MOBILE NAVIGATION SCRIPT
  ======================================================= -->

  <script>
    const menuToggle =
      document.querySelector(".menu-toggle");

    const mainNav =
      document.querySelector(".main-nav");

    if (menuToggle && mainNav) {
      menuToggle.addEventListener("click", () => {
        const isOpen =
          mainNav.classList.toggle("is-open");

        menuToggle.classList.toggle(
          "is-open",
          isOpen
        );

        menuToggle.setAttribute(
          "aria-expanded",
          String(isOpen)
        );

        menuToggle.setAttribute(
          "aria-label",
          isOpen
            ? "Close navigation menu"
            : "Open navigation menu"
        );
      });

      mainNav
        .querySelectorAll("a")
        .forEach((link) => {
          link.addEventListener("click", () => {
            mainNav.classList.remove("is-open");

            menuToggle.classList.remove(
              "is-open"
            );

            menuToggle.setAttribute(
              "aria-expanded",
              "false"
            );

            menuToggle.setAttribute(
              "aria-label",
              "Open navigation menu"
            );
          });
        });
    }
  </script>

</body>

</html>