<!--
======================================================
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 Alyas Proteksyon ni jhElmEr at basahin ang konteksto at buong lyrics nito."
>

<title>Alyas Proteksyon | 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-alyas-proteksyon.png"
  alt="Cover image ng original song na Alyas Proteksyon"
>

          </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 Alyas Proteksyon"
>
  <source
    src="audio/alyas-proteksyon.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>
    Hindi lahat ng mali ay tahasang ginagawa sa harap ng lahat.
    Minsan, sapat nang palitan ang pangalan nito upang magmukhang
    katanggap-tanggap.
  </p>

  <p>
    Ang kantang ito ay tungkol sa manipis na guhit sa pagitan ng
    tunay na proteksyon at pang-aabuso sa kapangyarihan.
    Ipinapaalala nitong may mga salitang ginagamit upang magbigay
    ng seguridad, kaayusan, o kapakanan—ngunit maaari ring gamitin
    bilang pantakip sa kontrol, katiwalian, korapsyon, o iba pang
    anyo ng maling paggamit ng kapangyarihan.
  </p>

  <p>
    Ang mensahe ng awiting ito ay hindi laban sa proteksyon.
    Sa halip, ipinapaalala nito na ang proteksyon ay mahalaga
    kapag ginagamit ayon sa batas, moralidad, at tunay na layunin
    nito. Ngunit kapag ang kapangyarihan ay ginagamit upang takpan
    ang mali o patahimikin ang katotohanan, hindi na ito
    proteksyon—isa na itong anyo ng pang-aabuso.
  </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"
  >
    Alyas Proteksyon
  </h1>

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

  <div class="lyrics-content">

    <div class="lyrics-stanza">

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

      <p>Hindi lahat ng mali… itinatago.</p>
      <p>Yung iba—pinapangalanan lang ng iba.</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Hindi na tinatago—binibigyan ng bagong mukha</p>
      <p>Parehong galaw—pero ibang tawag na</p>
      <p>Hindi na krimen—kung iba ang pangalan</p>
      <p>Hindi na abuso—kung "para sa kapakanan"</p>

      <br>

      <p>Proteksyon daw—pero bakit may takot?</p>
      <p>Bawat galaw mo—parang may nakatutok</p>
      <p>Hindi ka na ligtas—nakabantay ka na</p>
      <p>Sa sistemang tahimik—pero may hawak na</p>

      <br>

      <p>May alyas ang mali—para hindi makilala</p>
      <p>Pinapalitan ang salita—para mag-iba ang basa</p>
      <p>Kapag maganda ang tunog—hindi na kinukwestyon</p>
      <p>Diyan nagsisimula ang tahimik na kontrol</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Kapag binago ang salita—nag-iiba ang tingin</p>
      <p>Kapag pinalitan ang pangalan—parang wala nang mali</p>
      <p>Kung ang totoo'y tinatakpan ng maayos na salita</p>
      <p>Saan ka kakapit kung pati wika'y ginamit na sandata?</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Alyas Proteksyon</p>
      <p>Pangalan lang ang bago</p>
      <p>Parehong kontrol</p>
      <p>Iba lang ang tawag dito</p>

      <br>

      <p>Alyas kaayusan</p>
      <p>Pero takot ang totoo</p>
      <p>Kapag binago ang salita</p>
      <p>Naloloko ang mundo</p>

      <br>

      <p>Hindi na ito bantay</p>
      <p>Kung ikaw ang kinukulong</p>
      <p>Hindi na proteksyon</p>
      <p>Kung kalayaan ang tinutunaw</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Hindi lang aksyon—pati salita ang binabago</p>
      <p>Para ang mali—magmukhang katanggap-tanggap sa tao</p>
      <p>Ginagawang tahimik ang dapat marinig</p>
      <p>Pinapaliit ang mali para hindi mapansin</p>

      <br>

      <p>Kapag may kapangyarihan—may responsibilidad</p>
      <p>Pero kapag inabuso—tinatawag na "kailangan" agad</p>
      <p>Para sa kaayusan—para sa katahimikan</p>
      <p>Pero bakit may nawawala sa bawat pagpigil na 'yan?</p>

      <br>

      <p>Unti-unti—hanggang sa normal na</p>
      <p>Hindi mo na tanong kung tama pa ba</p>
      <p>Dahil sanay ka na sa bagong tawag</p>
      <p>Na ang mali—puwede palang baguhin ang pangalan</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Kung ang katahimikan ay sapilitan</p>
      <p>Hindi iyon kapayapaan</p>
      <p>Kung ang proteksyon ay may kondisyon</p>
      <p>Hindi iyon kaligtasan</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Isang sistema—maraming alyas</p>
      <p>Depende kung paano ipapasa</p>
      <p>Puwedeng proteksyon—puwedeng kontrol</p>
      <p>Parehong galaw—magkaiba lang ang label</p>

      <br>

      <p>Hindi mo napansin—hanggang sa tanggap mo na</p>
      <p>Na ang mali—puwede palang gawing tama</p>
      <p>Basta maganda ang pangalan na dala</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Alyas Proteksyon</p>
      <p>Pangalan lang ang bago</p>
      <p>Parehong kontrol</p>
      <p>Iba lang ang tawag dito</p>

      <br>

      <p>Alyas kaayusan</p>
      <p>Pero takot ang totoo</p>
      <p>Kapag binago ang salita</p>
      <p>Naloloko ang mundo</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Kapag kailangan mong palitan ang pangalan ng mali</p>
      <p>Alam mong hindi mo ito kayang ipagtanggol</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>Hindi na ito bantay</p>
      <p>Kung ikaw ang kinukulong</p>
      <p>Hindi na proteksyon</p>
      <p>Kung kalayaan ang tinutunaw</p>

      <br>

      <p>Alyas Proteksyon</p>
      <p>Pangalan lang ang bago</p>
      <p>Parehong kontrol</p>
      <p>Iba lang ang tawag dito</p>

    </div>

    <div class="lyrics-stanza">

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

      <p>May proteksyon na nagliligtas.</p>
      <p>May proteksyon na kumukulong.</p>
      <p>Magkapareho ang pangalan—</p>
      <p>Magkaiba ang totoo.</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>