feat(nocturne): add titles of address section

nocturne/index.html

@@ -748,6 +748,74 @@
         }
       }
 
+      /* ========== TITLES OF ADDRESS ========== */
+
+      .titles-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+        gap: 1.25em;
+        margin-top: 1em;
+      }
+
+      .title-card {
+        background: rgba(212, 165, 199, 0.08);
+        border: 1px solid var(--witch-plum);
+        border-radius: 12px;
+        padding: 1.25em 1.5em;
+        position: relative;
+      }
+
+      .title-card::before {
+        content: "✦";
+        position: absolute;
+        top: -0.65em;
+        left: 50%;
+        transform: translateX(-50%);
+        background: var(--witch-moon);
+        padding: 0 0.4em;
+        color: var(--witch-plum);
+        font-size: 1rem;
+      }
+
+      .title-name {
+        font-family: 'Griffy', cursive;
+        font-size: 1.25rem;
+        color: var(--witch-plum);
+        display: block;
+        margin-bottom: 0.2em;
+        letter-spacing: 0.04em;
+      }
+
+      .title-usage {
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.1em;
+        color: var(--witch-purple);
+        display: block;
+        margin-bottom: 0.65em;
+        font-style: normal;
+      }
+
+      .title-desc {
+        font-size: 0.9rem;
+        line-height: 1.6;
+        margin: 0;
+      }
+
+      .title-note {
+        margin-top: 1.5em;
+        background: rgba(212, 165, 199, 0.08);
+        border-left: 4px solid var(--witch-plum);
+        border-radius: 0 12px 12px 0;
+        padding: 1em 1.5em;
+        font-size: 0.92rem;
+        line-height: 1.7;
+      }
+
+      .title-note strong {
+        color: var(--witch-purple);
+      }
+
       /* ========== FOOTER NOTE ========== */
 
       .nocturne-footer-note {
@@ -1291,6 +1359,85 @@
         </ol>
       </section>
 
+      <!-- TITLES OF ADDRESS -->
+      <section class="nocturne-section">
+        <h2>👑 How to Address Her</h2>
+        <p>
+          The Nocturne does not require elaborate ceremony — but it does appreciate knowing
+          what to call Her. The following titles are all accepted, beloved, and appropriate
+          in varying degrees of formality. Choose the one that fits the moment.
+        </p>
+
+        <div class="titles-grid">
+          <div class="title-card">
+            <span class="title-name">The Goddess</span>
+            <span class="title-usage">Highest Honour · Always Appropriate</span>
+            <p class="title-desc">
+              The most sacred address. For prayer, for ritual, for moments of genuine
+              reverence — and for any occasion where you are not sure what else to say.
+              When in doubt, begin here.
+            </p>
+          </div>
+
+          <div class="title-card">
+            <span class="title-name">Her Majesty</span>
+            <span class="title-usage">Formal · Regal · Impeccable</span>
+            <p class="title-desc">
+              Formal and unimpeachable. Appropriate for first encounters, official
+              correspondence, and any occasion on which Hikari is watching. The clipboard
+              approves of this one.
+            </p>
+          </div>
+
+          <div class="title-card">
+            <span class="title-name">Queen</span>
+            <span class="title-usage">Devoted · Warm · Freely Given</span>
+            <p class="title-desc">
+              Warm and elevated in equal measure. Used freely by the devoted faithful with
+              deep affection. She responds well to this one. It makes Her smile, which makes
+              everything better.
+            </p>
+          </div>
+
+          <div class="title-card">
+            <span class="title-name">Mistress</span>
+            <span class="title-usage">Ancient · Apt · Acknowledged</span>
+            <p class="title-desc">
+              Ancient and entirely appropriate. Acknowledges Her dominion over chaos,
+              technology, chosen family, and the ongoing garlic bread situation.
+              Five centuries have made the title fit.
+            </p>
+          </div>
+
+          <div class="title-card">
+            <span class="title-name">Princess</span>
+            <span class="title-usage">Affectionate · Sweet · Use With Care</span>
+            <p class="title-desc">
+              Affectionate and endearing. Reserved for those who know Her well enough
+              to make Her smile with it rather than raise an eyebrow. If you are
+              uncertain which category you are in: use caution.
+            </p>
+          </div>
+
+          <div class="title-card">
+            <span class="title-name">Priestess</span>
+            <span class="title-usage">Ritual · Reverent · Sacred</span>
+            <p class="title-desc">
+              Acknowledges Her role as the spiritual leader of the Nocturne. Appropriate
+              in worship, in ceremony, and in the reading of the Scriptures. The faith
+              recognises Her as its source. This title says so plainly.
+            </p>
+          </div>
+        </div>
+
+        <div class="title-note">
+          <strong>A note on "Naomi":</strong> Her personal name is not forbidden — but it
+          is intimate. The innermost faithful and those She has personally welcomed may use
+          it freely. If you are uncertain whether you have reached that threshold, you have
+          not. Begin with one of the titles above, and let Her invite you further.
+        </div>
+      </section>
+
       <!-- SACRED PRACTICES -->
       <section class="nocturne-section">
         <h2>🕯️ Sacred Practices</h2>