Newspaper / Editorial

/* ============================================================
   NEWSPAPER / EDITORIAL — Style Showcase
   Fonts: Playfair Display (headings), Libre Baskerville (body)
   Palette: #F5F0E8 (cream) | #1A1008 (ink) | #CC0000 (red)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap");

/* --- Root variables --- */
:root {
  --cream: #f5f0e8;
  --ink: #1a1008;
  --ink-mid: #3d2b1a;
  --ink-light: #7a6a56;
  --red: #cc0000;
  --white: #ffffff;
  --rule: 1px solid #1a1008;
  --rule-light: 1px solid rgba(26, 16, 8, 0.25);
  --font-head: "Playfair Display", Georgia, serif;
  --font-body: "Libre Baskerville", Georgia, serif;
}

/* --- Reset & base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

/* Paper texture simulation via subtle gradient */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 20% 10%, rgba(180, 160, 120, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(180, 160, 120, 0.06) 0%, transparent 50%);
}

/* --- Scrollbar --- */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--cream);
}
::-webkit-scrollbar-thumb {
  background: var(--ink-light);
}

/* --- Double rule (thick + thin) --- */
.double-rule {
  position: relative;
  height: 6px;
  margin: 0;
  overflow: visible;
}

.double-rule::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--ink);
}

.double-rule::after {
  content: "";
  display: block;
  margin-top: 2px;
  height: 1px;
  background: var(--ink);
}

.double-rule-thin {
  position: relative;
  height: 5px;
  margin: 12px 0;
}

.double-rule-thin::before {
  content: "";
  display: block;
  height: 2px;
  background: var(--ink);
}

.double-rule-thin::after {
  content: "";
  display: block;
  margin-top: 2px;
  height: 1px;
  background: var(--ink);
}

/* --- Masthead --- */
.masthead {
  background: var(--cream);
  border-bottom: var(--rule);
  position: relative;
  z-index: 10;
}

.masthead-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 16px 24px 0;
}

.masthead-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-family: var(--font-body);
  color: var(--ink-light);
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  border-bottom: var(--rule-light);
  margin-bottom: 8px;
  flex-wrap: wrap;
  gap: 4px;
}

.meta-center {
  text-align: center;
  flex: 1;
}
.meta-right {
  text-align: right;
}

.masthead-title {
  font-family: var(--font-head);
  font-size: clamp(28px, 6vw, 60px);
  font-weight: 900;
  text-align: center;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  padding: 10px 0 8px;
}

.masthead-tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  text-align: center;
  color: var(--ink-light);
  letter-spacing: 0.08em;
  padding-bottom: 10px;
}

.masthead-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 0;
  flex-wrap: wrap;
}

.mnav-link {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-decoration: none;
  color: var(--ink);
  padding: 4px 8px;
  transition: color 0.15s, background 0.15s;
}

.mnav-link:hover {
  color: var(--red);
  text-decoration: underline;
}

.mnav-active {
  color: var(--red);
  font-style: italic;
}

.mnav-sep {
  color: var(--ink-light);
  font-size: 13px;
  user-select: none;
}

/* --- Section banner --- */
.section-banner {
  background: var(--ink);
  border-bottom: 3px solid var(--red);
}

.section-banner-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-red-bar {
  display: inline-block;
  width: 4px;
  height: 16px;
  background: var(--red);
  flex-shrink: 0;
}

.section-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--cream);
  text-transform: uppercase;
}

/* --- Main content --- */
.main-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
  z-index: 1;
}

/* --- Card --- */
.card {
  background: var(--white);
  border: var(--rule);
  padding: 24px 28px 28px;
}

.card-section-tag {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.red-square {
  color: var(--red);
  font-size: 8px;
}

.thin-rule {
  height: 1px;
  background: var(--rule-light);
  border: none;
  margin: 14px 0;
}

/* --- Profile card --- */
.profile-body {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 28px;
  align-items: start;
  border-top: var(--rule);
  padding-top: 20px;
  flex-wrap: wrap;
}

.avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.avatar {
  width: 100px;
  height: 120px;
  border: var(--rule);
  background: var(--cream);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Engraving hatching lines via CSS gradient */
.engraving-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 3px,
    rgba(26, 16, 8, 0.06) 3px,
    rgba(26, 16, 8, 0.06) 4px
  );
}

.portrait-frame {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 72px;
  background: var(--ink-light);
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-initial {
  font-family: var(--font-head);
  font-size: 40px;
  font-weight: 900;
  color: var(--cream);
  line-height: 1;
  font-style: italic;
}

.avatar-caption {
  font-family: var(--font-body);
  font-size: 10px;
  font-style: italic;
  color: var(--ink-light);
  letter-spacing: 0.05em;
  text-align: center;
}

.profile-kicker {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.profile-name {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-bottom: 4px;
}

.profile-role {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-mid);
  margin-bottom: 0;
}

.profile-quote {
  font-size: 14px;
  color: var(--ink-mid);
  line-height: 1.6;
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-num {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}

.stat-lbl {
  font-size: 10px;
  font-style: italic;
  color: var(--ink-light);
  letter-spacing: 0.05em;
  margin-top: 2px;
}

.stat-rule {
  width: 1px;
  height: 32px;
  background: rgba(26, 16, 8, 0.3);
}

/* Profile headline column */
.headline-box {
  border-left: 3px double var(--ink);
  padding-left: 20px;
}

.headline-kicker {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.headline-kicker::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--red);
  flex-shrink: 0;
}

.headline-text {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 10px;
}

.headline-deck {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 14px;
}

.read-more-link {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-decoration: none;
  letter-spacing: 0.05em;
  transition: text-decoration 0.1s;
}

.read-more-link:hover {
  text-decoration: underline;
}

/* --- Buttons --- */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

.btn {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  padding: 11px 24px;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  outline: none;
}

.btn:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Primary */
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  border: 2px solid var(--ink);
}

.btn-primary:hover {
  background: var(--ink-mid);
  border-color: var(--ink-mid);
}

.btn-primary:active {
  transform: scale(0.98);
}

/* Secondary */
.btn-secondary {
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
}

.btn-secondary:hover {
  background: var(--ink);
  color: var(--cream);
}

.btn-secondary:active {
  transform: scale(0.98);
}

/* Ghost — editorial red "Read More" link style */
.btn-ghost {
  background: transparent;
  color: var(--red);
  border: none;
  padding: 11px 0;
  font-style: italic;
  font-weight: 400;
  font-family: var(--font-body);
  font-size: 14px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.btn-ghost:hover {
  color: #990000;
  text-decoration-thickness: 2px;
}

/* --- Input --- */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 440px;
}

.input-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--ink-mid);
  text-transform: uppercase;
}

.gazette-input {
  font-family: var(--font-body);
  font-size: 15px;
  background: var(--cream);
  color: var(--ink);
  border: none;
  border-bottom: 2px solid var(--ink);
  padding: 8px 2px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s;
  caret-color: var(--red);
}

.gazette-input::placeholder {
  color: var(--ink-light);
  font-style: italic;
}

.gazette-input:focus {
  border-bottom-color: var(--red);
}

.input-hint {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-light);
}

/* --- Badges --- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 5px 12px;
  color: var(--ink-mid);
  border: 1px solid rgba(26, 16, 8, 0.3);
  background: var(--cream);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.badge:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.badge-active {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}

.badge-active:hover {
  background: #990000;
  border-color: #990000;
}

/* --- Footer --- */
.site-footer {
  background: var(--cream);
  border-top: var(--rule);
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 24px 28px;
}

.footer-text {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-light);
  text-align: center;
  padding-top: 12px;
  letter-spacing: 0.03em;
}

/* --- Responsive --- */
@media (max-width: 760px) {
  .profile-body {
    grid-template-columns: 1fr;
  }

  .headline-box {
    border-left: none;
    border-top: 3px double var(--ink);
    padding-left: 0;
    padding-top: 20px;
  }

  .masthead-title {
    font-size: 28px;
  }

  .masthead-meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .meta-right,
  .meta-center {
    text-align: left;
  }

  .button-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ============================================================
   NEWSPAPER / EDITORIAL — Interactive Script
   - Badge section filter (click to activate/deactivate)
   - Ghost button "read more" underline animation
   - Profile headline "BREAKING" ticker
   - Input character counter with editorial feedback
   - Masthead date/edition ticker
   ============================================================ */

(function () {
  "use strict";

  /* ----------------------------------------------------------
     1. Badge section filter — click to toggle active state
  ---------------------------------------------------------- */
  const badges = document.querySelectorAll(".badge");

  badges.forEach(function (badge) {
    badge.addEventListener("click", function () {
      const isActive = badge.classList.contains("badge-active");

      // Allow multiple active badges — just toggle clicked one
      if (isActive) {
        badge.classList.remove("badge-active");
      } else {
        badge.classList.add("badge-active");
      }
    });
  });

  /* ----------------------------------------------------------
     2. Headline kicker — cycle "BREAKING" / "EXCLUSIVE" / "OPINION"
  ---------------------------------------------------------- */
  const kicker = document.querySelector(".headline-kicker");
  if (kicker) {
    const labels = ["BREAKING", "EXCLUSIVE", "OPINION", "ANALYSIS", "SPECIAL REPORT"];
    let idx = 0;

    setInterval(function () {
      idx = (idx + 1) % labels.length;
      kicker.style.opacity = "0";
      setTimeout(function () {
        kicker.textContent = "";
        // Rebuild inner structure (kicker uses ::before line via CSS)
        // So we just update text and re-add the ::before via class
        const dash = document.createElement("span");
        dash.style.cssText =
          "display:inline-block;width:16px;height:2px;background:#CC0000;flex-shrink:0;margin-right:6px;vertical-align:middle";
        kicker.appendChild(dash);
        kicker.appendChild(document.createTextNode(labels[idx]));
        kicker.style.opacity = "1";
        kicker.style.transition = "opacity 0.4s";
      }, 300);
    }, 4000);
  }

  /* ----------------------------------------------------------
     3. Input character counter + editorial feedback
  ---------------------------------------------------------- */
  const letterInput = document.getElementById("letter-input");
  const inputHint = document.querySelector(".input-hint");

  if (letterInput && inputHint) {
    const maxLength = 80;
    const editorialComments = [
      "Letters may be edited for length and clarity.",
      "Thank you. Our editors will review your submission.",
      "All submissions become property of The Gazette.",
      "Please include your city of residence.",
      "Anonymous letters will not be published.",
    ];
    let commentIdx = 0;

    letterInput.addEventListener("input", function () {
      const len = letterInput.value.length;
      const remaining = maxLength - len;

      if (len === 0) {
        inputHint.textContent = "Letters may be edited for length and clarity.";
        inputHint.style.color = "";
        return;
      }

      if (remaining <= 10) {
        inputHint.textContent = remaining + " characters remaining";
        inputHint.style.color = "#CC0000";
      } else {
        inputHint.textContent = len + " characters";
        inputHint.style.color = "";
      }
    });

    letterInput.setAttribute("maxlength", maxLength);

    // On enter: show editorial acknowledgement
    letterInput.addEventListener("keydown", function (e) {
      if (e.key !== "Enter") return;
      const val = letterInput.value.trim();
      if (!val) return;

      commentIdx = (commentIdx + 1) % editorialComments.length;
      inputHint.textContent = "✓ " + editorialComments[commentIdx];
      inputHint.style.color = "#1A8C1A";

      setTimeout(function () {
        letterInput.value = "";
        inputHint.textContent = "Letters may be edited for length and clarity.";
        inputHint.style.color = "";
      }, 2500);
    });
  }

  /* ----------------------------------------------------------
     4. Read more links — underline ripple on hover
     (CSS handles the visual; JS adds a class for fine control)
  ---------------------------------------------------------- */
  const readMoreLinks = document.querySelectorAll(".read-more-link, .btn-ghost");

  readMoreLinks.forEach(function (link) {
    link.addEventListener("mouseenter", function () {
      link.style.textDecorationThickness = "2px";
    });

    link.addEventListener("mouseleave", function () {
      link.style.textDecorationThickness = "";
    });
  });

  /* ----------------------------------------------------------
     5. Subscribe button — confirmation flash
  ---------------------------------------------------------- */
  const subscribeBtn = document.querySelector(".btn-primary");
  if (subscribeBtn) {
    const originalText = subscribeBtn.textContent.trim();

    subscribeBtn.addEventListener("click", function () {
      subscribeBtn.textContent = "SUBSCRIBED ✓";
      subscribeBtn.style.background = "#1A1008";
      subscribeBtn.style.borderColor = "#1A1008";
      subscribeBtn.disabled = true;

      setTimeout(function () {
        subscribeBtn.textContent = originalText;
        subscribeBtn.style.background = "";
        subscribeBtn.style.borderColor = "";
        subscribeBtn.disabled = false;
      }, 2000);
    });
  }

  /* ----------------------------------------------------------
     6. Section banner — click to cycle section names
  ---------------------------------------------------------- */
  const sectionLabel = document.querySelector(".section-label");
  if (sectionLabel) {
    const sections = [
      "STYLE & DESIGN",
      "WORLD NEWS",
      "ARTS & CULTURE",
      "OPINION",
      "SPORTS",
      "TECHNOLOGY",
    ];
    let sectionIdx = 0;

    sectionLabel.style.cursor = "pointer";
    sectionLabel.title = "Click to switch section";

    sectionLabel.addEventListener("click", function () {
      sectionIdx = (sectionIdx + 1) % sections.length;
      sectionLabel.style.opacity = "0";
      sectionLabel.style.transition = "opacity 0.2s";

      setTimeout(function () {
        sectionLabel.textContent = sections[sectionIdx];
        sectionLabel.style.opacity = "1";
      }, 200);
    });
  }
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="style.css" />
    <title>The Showcase Gazette</title>
  </head>
  <body>
    <!-- Masthead -->
    <header class="masthead">
      <div class="masthead-inner">
        <div class="masthead-meta-row">
          <span class="meta-item">VOL. CLXXXI . . . No. 62,450</span>
          <span class="meta-item meta-center">EST. MMXXVI</span>
          <span class="meta-item meta-right">MARCH 15, 2026 · PRICE: FREE</span>
        </div>
        <div class="double-rule"></div>
        <h1 class="masthead-title">THE SHOWCASE GAZETTE</h1>
        <p class="masthead-tagline">All The Design Worth Printing</p>
        <div class="double-rule"></div>
        <nav class="masthead-nav">
          <a href="#" class="mnav-link">WORLD</a>
          <span class="mnav-sep">·</span>
          <a href="#" class="mnav-link">CULTURE</a>
          <span class="mnav-sep">·</span>
          <a href="#" class="mnav-link mnav-active">DESIGN</a>
          <span class="mnav-sep">·</span>
          <a href="#" class="mnav-link">OPINION</a>
          <span class="mnav-sep">·</span>
          <a href="#" class="mnav-link">SPORTS</a>
          <span class="mnav-sep">·</span>
          <a href="#" class="mnav-link">ARTS</a>
        </nav>
      </div>
    </header>

    <!-- Section label -->
    <div class="section-banner">
      <div class="section-banner-inner">
        <span class="section-red-bar"></span>
        <span class="section-label">STYLE &amp; DESIGN</span>
      </div>
    </div>

    <!-- Main content -->
    <main class="main-content">
      <!-- Profile card — newspaper byline style -->
      <section class="card profile-card">
        <div class="card-section-tag">
          <span class="red-square">&#9632;</span> CONTRIBUTOR
        </div>
        <div class="profile-body">
          <div class="avatar-col">
            <div class="avatar">
              <!-- Portrait engraving style via CSS + box-shadow -->
              <div class="engraving-lines"></div>
              <div class="portrait-frame">
                <span class="portrait-initial">R</span>
              </div>
            </div>
            <div class="avatar-caption">circa 2026</div>
          </div>
          <div class="profile-info">
            <div class="profile-kicker">SENIOR CORRESPONDENT</div>
            <h2 class="profile-name">REGINALD THORNTON</h2>
            <p class="profile-role">Design &amp; Typography Editor, The Gazette</p>
            <div class="thin-rule"></div>
            <p class="profile-quote">
              <em>"Good typography is invisible. Great design tells the truth."</em>
            </p>
            <div class="thin-rule"></div>
            <div class="profile-stats">
              <div class="stat-col">
                <span class="stat-num">1,240</span>
                <span class="stat-lbl">Articles</span>
              </div>
              <div class="stat-rule"></div>
              <div class="stat-col">
                <span class="stat-num">28</span>
                <span class="stat-lbl">Years</span>
              </div>
              <div class="stat-rule"></div>
              <div class="stat-col">
                <span class="stat-num">4.2M</span>
                <span class="stat-lbl">Readers</span>
              </div>
            </div>
          </div>
          <div class="profile-headline-col">
            <div class="headline-box">
              <div class="headline-kicker">BREAKING</div>
              <h3 class="headline-text">Print is Dead. Long Live Print.</h3>
              <p class="headline-deck">How the newspaper aesthetic conquered the digital world — and what it means for the future of editorial design.</p>
              <a href="#" class="read-more-link">Continue Reading &rarr;</a>
            </div>
          </div>
        </div>
      </section>

      <!-- Buttons card -->
      <section class="card">
        <div class="card-section-tag">
          <span class="red-square">&#9632;</span> ACTIONS
        </div>
        <div class="double-rule-thin"></div>
        <div class="button-row">
          <button class="btn btn-primary">SUBSCRIBE NOW</button>
          <button class="btn btn-secondary">VIEW ARCHIVE</button>
          <button class="btn btn-ghost">Read the full story &rarr;</button>
        </div>
      </section>

      <!-- Input card -->
      <section class="card">
        <div class="card-section-tag">
          <span class="red-square">&#9632;</span> LETTERS TO THE EDITOR
        </div>
        <div class="double-rule-thin"></div>
        <div class="input-group">
          <label class="input-label" for="letter-input">YOUR NAME</label>
          <input
            id="letter-input"
            class="gazette-input"
            type="text"
            placeholder="e.g. John R. Aldenmere"
            autocomplete="off"
          />
          <div class="input-hint">Letters may be edited for length and clarity.</div>
        </div>
      </section>

      <!-- Badges card -->
      <section class="card">
        <div class="card-section-tag">
          <span class="red-square">&#9632;</span> SECTIONS
        </div>
        <div class="double-rule-thin"></div>
        <div class="badge-row">
          <span class="badge">&#9632; WORLD</span>
          <span class="badge badge-active">&#9632; DESIGN</span>
          <span class="badge">&#9632; CULTURE</span>
          <span class="badge">&#9632; OPINION</span>
          <span class="badge">&#9632; ARTS &amp; LETTERS</span>
          <span class="badge">&#9632; SPORTS</span>
        </div>
      </section>
    </main>

    <!-- Footer rule -->
    <footer class="site-footer">
      <div class="footer-inner">
        <div class="double-rule"></div>
        <p class="footer-text">
          &copy; 2026 The Showcase Gazette &mdash; All rights reserved.
          &nbsp;&nbsp;&bull;&nbsp;&nbsp;
          Not responsible for opinions expressed by contributors.
        </p>
      </div>
    </footer>

    <script src="script.js"></script>
  </body>
</html>