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

FILE:
_templates/music-article.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 music-article.html mula sa
   /_templates/ folder at ilagay ang duplicate sa
   /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
   • Canonical article URL
   • Open Graph article URL
   • 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 ay naka-store sa /_templates/
folder.

Ang lahat ng published Music articles ay inilalagay sa
/articles/ folder.

Ang mga relative path sa template ay nakasulat para
sa FINAL PUBLISHED ARTICLE na nasa /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 published
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.

Ang canonical at Open Graph URL ng bawat published Music article
ay dapat gumamit ng FINAL article filename.

Halimbawa:

https://jhelmersimplengtao.com/articles/music-hindi-tahimik.html

------------------------------------------------------
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"
  >

<link
  rel="icon"
  type="image/png"
  sizes="192x192"
  href="/favicon.png"
>

<link
  rel="shortcut icon"
  href="/favicon.ico"
>
   
<meta
  name="description"
  content="Kung Hindi Ngayon—isang original song ni jhElmEr tungkol sa pag-iwas, pananagutan, at paninindigan. Pakinggan ang awit at basahin ang buong lyrics."
>

<link
  rel="canonical"
  href="https://jhelmersimplengtao.com/articles/music-kung-hindi-ngayon.html"
>

<meta
  property="og:url"
  content="https://jhelmersimplengtao.com/articles/music-kung-hindi-ngayon.html"
>

<title>KUNG HINDI NGAYON | 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-kung-hindi-ngayon.png"
        alt="Cover image ng original song na Kung Hindi Ngayon"
      >

    </div>

  </figure>

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

             TAMANG PATH:
             audio/song-title.mp3

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

        <section
    class="song-player-section"
    aria-label="Song 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 Kung Hindi Ngayon"
      >
        <source
          src="audio/kung-hindi-ngayon.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>
    Alam natin kung ano ang tama. Nakikita natin kung
    ano ang kailangang gawin. Pero sa pagitan ng
    pagkakaalam at pagkilos, madalas pumapasok ang
    “mamaya na,” “bukas na,” at “hindi pa ngayon.”
  </p>

  <p>
    Ang “Kung Hindi Ngayon” ay isang direktang tanong
    tungkol sa pag-iwas, pananagutan, at paninindigan.
    Hindi lahat ng pananahimik ay kawalan ng alam.
    Hindi lahat ng paghihintay ay paghahanda.
    May puntong malinaw na ang dapat gawin—pero
    pinipili pa rin nating huwag kumilos.
  </p>

  <p>
    Walang mahabang paliwanag.
  </p>

  <p>
    Kung alam mo na ang tama pero hindi ka pa rin
    kumikilos—kung hindi ngayon, kailan?
  </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"
  >
    KUNG HINDI NGAYON
  </h1>

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

  <div class="lyrics-content">

    <!-- INTRO -->

    <div class="lyrics-stanza">

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

      <p>Walang paliwanag. Walang argumento.</p>
      <p>Kung alam mo na— hindi ka na nagtatanong.</p>
      <p>Pinipili mo na lang.</p>

    </div>

    <!-- VERSE 1 -->

    <div class="lyrics-stanza">

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

      <p>Alam mo na—pero tahimik ka pa rin</p>
      <p>Kita mo na—pero wala kang gawin</p>
      <p>Hindi ka kulang—hindi ka nawawala</p>
      <p>Pinipili mo lang umiwas sa tama</p>

      <p>&nbsp;</p>

      <p>Hindi ito biglaan—unti-unti ’yan</p>
      <p>Sa bawat “mamaya na” na binibigyan mo ng dahilan</p>
      <p>Hanggang sa naging normal ang hindi paggalaw</p>
      <p>Hanggang sa ikaw na mismo ang hindi sumasagot sa tanong mo araw-araw</p>

      <p>&nbsp;</p>

      <p>Hindi ka inosente—alam mo ’to</p>
      <p>Hindi ka bingi—pinipili mo lang ’wag marinig ’to</p>
      <p>Hindi ka bulag—umiwas ka lang tumingin</p>
      <p>At sa bawat pag-iwas—lalo kang lumalalim</p>

    </div>

    <!-- PRE-CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Hindi sapat na alam mo lang</p>
      <p>Kung wala kang ginagawa</p>
      <p>Hindi sapat na tama ka</p>
      <p>Kung wala kang paninindigan</p>

    </div>

    <!-- CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Kung hindi ngayon—kailan ka kikilos?</p>
      <p>Kung hindi ikaw—sino ang gagalaw?</p>
      <p>Kung alam mo na—bakit ka tahimik?</p>
      <p>Hindi ka naghihintay—umiwas ka lang</p>

    </div>

    <!-- VERSE 2 -->

    <div class="lyrics-stanza">

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

      <p>Ilang beses ka pang maghihintay?</p>
      <p>Ilang dahilan pa ang gagawin mong hadlang?</p>
      <p>Kung malinaw na sa’yo—ano pa ang kulang?</p>
      <p>Takot—o komportable ka lang?</p>

      <p>&nbsp;</p>

      <p>Hindi mo kailangan maging perpekto</p>
      <p>Kailangan mo lang tumindig kahit mahirap ito</p>
      <p>Hindi mo kontrol ang lahat—totoo</p>
      <p>Pero kontrol mo kung kailan ka gagalaw—at hindi ’yon bukas kung alam mo na ngayon</p>

      <p>&nbsp;</p>

      <p>Hindi ito galit—ito’y salamin</p>
      <p>Kung saan ka tumingin—doon ka rin hahatulan din</p>
      <p>Hindi ka pinipilit—pero malinaw ang tanong</p>
      <p>Kung hindi ngayon—ano pa bang hinihintay mong tugon?</p>

    </div>

    <!-- PRE-CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Hindi sapat na alam mo lang</p>
      <p>Kung wala kang ginagawa</p>
      <p>Hindi sapat na tama ka</p>
      <p>Kung wala kang paninindigan</p>

    </div>

    <!-- CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Kung hindi ngayon—kailan ka kikilos?</p>
      <p>Kung hindi ikaw—sino ang gagalaw?</p>
      <p>Kung alam mo na—bakit ka tahimik?</p>
      <p>Hindi ka naghihintay—umiwas ka lang</p>

    </div>

    <!-- BRIDGE -->

    <div class="lyrics-stanza">

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

      <p>Walang paliwanag. Walang debate.</p>
      <p>Kung alam mo na ang tama— at hindi ka pa rin kumikilos—</p>
      <p>hindi ka naghihintay.</p>

    </div>

    <!-- FINAL CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Kung hindi ngayon—kailan ka kikilos?</p>
      <p>Kung hindi ikaw—sino ang gagalaw?</p>
      <p>Hindi sapat na alam—kailangan mong kumilos</p>
      <p>Kung hindi ngayon—kailan pa ba talaga?</p>

    </div>

    <!-- OUTRO -->

    <div class="lyrics-stanza">

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

      <p>Kung hindi ngayon—kailan?</p>
      <p>Hindi ka naghihintay—umiwas ka lang.</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>