<!--
======================================================
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="Dala Ko ’To—isang upbeat original Filipino anthem ni jhElmEr tungkol sa saya, pagkakakilanlan, tibay, at pagmamalaki bilang Pilipino saan man mapunta. Pakinggan ang awit at basahin ang buong lyrics."
>

<link
  rel="canonical"
  href="https://jhelmersimplengtao.com/articles/music-dala-ko-to.html"
>

<meta
  property="og:url"
  content="https://jhelmersimplengtao.com/articles/music-dala-ko-to.html"
>

<title>DALA KO ’TO | 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-dala-ko-to.png"
        alt="Cover image ng original song na Dala Ko ’To"
      >

    </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 Dala Ko ’To"
      >
        <source
          src="audio/dala-ko-to.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>
    Isang upbeat Filipino anthem tungkol sa saya,
    pagkakakilanlan, at pagmamalaking dala natin bilang
    Pilipino saan man tayo mapunta.
  </p>

  <p>
    Hindi lang ito awit tungkol sa ganda ng Pilipinas.
    Nandito rin ang simpleng buhay, tibay, pinanggalingan,
    at paninindigang kasama natin kahit saan tayo dalhin
    ng buhay.
  </p>

  <p>
    Taas-noo.<br>
    Sumabay.<br>
    At ipagdiwang ang bayang dala natin.
  </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"
  >
    DALA KO ’TO
  </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 script, walang pa-impress.</p>
      <p>Kung saan ako mapunta,</p>
      <p>may dala akong hindi ko iiwan.</p>

    </div>

    <!-- VERSE 1 -->

    <div class="lyrics-stanza">

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

      <p>Sa kanto may kwento, hindi scripted ’to</p>
      <p>Walang filter, walang retake—totoo ’to</p>
      <p>Hindi engrande, pero buo ang galaw</p>
      <p>Kahit simple lang, ramdam mo ang bayan</p>

      <p>&nbsp;</p>

      <p>Hindi imported ang saya, dito ’to nabuo</p>
      <p>Hindi kinopya, hindi hiniram—sariling dugo</p>
      <p>Kahit saan ako dalhin, hindi ako nawawala</p>
      <p>Kasi dala ko ’yung ugat, hindi lang bandera</p>

    </div>

    <!-- PRE-CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Hindi ito costume na pwede mong hubarin</p>
      <p>Hindi ito pangalan na pwede mong palitan</p>
      <p>Kahit saan mapunta, kahit anong mangyari</p>
      <p>May isang bagay na hindi mo matatanggal sa’kin</p>

    </div>

    <!-- CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Pilipinas! (Hey!)</p>
      <p>Taas noo, kahit saan mapunta!</p>

      <p>&nbsp;</p>

      <p>Galaw! Galaw! Huwag kang titigil!</p>
      <p>Kaliwa’t kanan, sumabay ka dito!</p>

      <p>&nbsp;</p>

      <p>Pilipinas! (Hey!)</p>
      <p>Dala ko ’to, hindi ko iiwan!</p>

      <p>&nbsp;</p>

      <p>Hey! Hey!</p>
      <p>Oh! Oh!</p>
      <p>Dala ko! Dala ko! Pilipinas ’to!</p>

    </div>

    <!-- VERSE 2 -->

    <div class="lyrics-stanza">

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

      <p>Sa alon may sigaw, hindi lang tanawin</p>
      <p>Sa bundok may kwento, hindi lang hangin</p>
      <p>Hindi postcard, hindi display</p>
      <p>Buhay ’to ng tao—kaya totoo</p>

      <p>&nbsp;</p>

      <p>Hindi lang ganda, may pinagdaanan</p>
      <p>Hindi lang saya, may pinanggalingan</p>
      <p>Kaya bawat hakbang, may bigat na dala</p>
      <p>Kahit sumasayaw, may dahilan ka</p>

    </div>

    <!-- VERSE 3 -->

    <div class="lyrics-stanza">

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

      <p>Kahit bagyo, kahit paulit-ulit</p>
      <p>Babangon ulit, hindi titigil</p>
      <p>Hindi lang saya, may tibay sa loob</p>
      <p>Hindi lang ngiti, may laban na kasunod</p>

      <p>&nbsp;</p>

      <p>Hindi tahimik, pero hindi puro salita</p>
      <p>Kapag gumalaw, may direksyon ang gawa</p>
      <p>Hindi lang proud, may pinaninindigan</p>
      <p>Kaya kahit saan, bitbit ko ang bayan</p>

    </div>

    <!-- BRIDGE -->

    <div class="lyrics-stanza">

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

      <p>Hindi perpekto, hindi natin itatanggi</p>
      <p>Pero hindi rin tayo ’yung unang susuko</p>
      <p>Kung saan ako tumayo, dala ko ’to</p>
      <p>Hindi lang bansa—responsibilidad ’to</p>

    </div>

    <!-- FINAL CHORUS -->

    <div class="lyrics-stanza">

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

      <p>Pilipinas! (Hey!)</p>
      <p>Taas noo, kahit saan mapunta!</p>

      <p>&nbsp;</p>

      <p>Galaw! Galaw! Huwag kang titigil!</p>
      <p>Kaliwa’t kanan, sumabay ka dito!</p>

      <p>&nbsp;</p>

      <p>Pilipinas! (Hey!)</p>
      <p>Dala ko ’to, hindi ko iiwan!</p>

      <p>&nbsp;</p>

      <p>Hey! Hey!</p>
      <p>Oh! Oh!</p>
      <p>Dala ko! Dala ko! Pilipinas ’to!</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>