Páginas Medio

News — Section Index

An editorial section-index page for The Meridian Standard's World desk, built in the newsprint tradition — a double-rule masthead, a red section header, and a justified lead story with drop cap, pull quote, and captioned press photo. A two-column teaser grid pairs CSS-gradient imagery with kickers, deks, and datelined bylines, while a numbered Most Read sidebar, Editor's Picks, and a briefing signup sit alongside. Sub-section tabs filter the grid by region and a load-more control reveals further dispatches, all with toast feedback and keyboard support.

Abrir en Lab

html css vanilla-js

Targets: JS HTML

Código

:root {
  --cream: #f4efe4;
  --paper: #faf7f0;
  --white: #ffffff;
  --newsprint: #efe9da;
  --ink: #16130f;
  --ink-2: #2b2620;
  --ink-3: #4a443b;
  --muted: #7a7164;
  --red: #b4291f;
  --red-d: #8f1f17;
  --red-50: #f3dcd9;
  --rule: rgba(22, 19, 15, 0.16);
  --rule-2: rgba(22, 19, 15, 0.30);
  --rule-hair: rgba(22, 19, 15, 0.10);
  --ok: #2f7d4f;
  --warn: #b67a18;
  --danger: #b4291f;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --display: "Playfair Display", "Times New Roman", Georgia, serif;
  --ui: "Inter", system-ui, -apple-system, sans-serif;
  --maxw: 1180px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--cream);
  background-image:
    repeating-linear-gradient(0deg, transparent 0, transparent 27px, rgba(22, 19, 15, 0.018) 28px),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 60%);
}

a {
  color: inherit;
}

img {
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-family: var(--ui);
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.18s ease;
}

.skip-link:focus {
  top: 8px;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

/* ---------- Masthead ---------- */
.masthead {
  background: var(--paper);
  border-bottom: 3px double var(--rule-2);
}

.masthead__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 24px 14px;
  text-align: center;
}

.masthead__dateline {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.masthead__logo {
  display: inline-block;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.1rem, 6vw, 4.1rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
}

.masthead__strap {
  margin: 8px 0 0;
  font-style: italic;
  font-family: var(--display);
  font-size: 0.92rem;
  color: var(--ink-3);
}

.topnav {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--newsprint);
}

.topnav__list {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px 0;
}

.topnav__list a {
  display: block;
  padding: 9px 16px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  position: relative;
}

.topnav__list a:hover {
  color: var(--red);
}

.topnav__list a[aria-current="page"] {
  color: var(--red);
}

.topnav__list a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--red);
}

/* ---------- Wrap ---------- */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 28px 24px 56px;
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 26px 0;
}

/* ---------- Section head ---------- */
.section-head {
  border-top: 3px solid var(--red);
  padding-top: 12px;
  margin-bottom: 18px;
}

.section-head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.section-head__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2rem, 5.5vw, 3.3rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.section-head__count {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.section-head__dek {
  margin: 8px 0 0;
  max-width: 60ch;
  font-size: 1.02rem;
  color: var(--ink-3);
  font-family: var(--display);
  font-style: italic;
}

/* ---------- Sub-nav ---------- */
.subnav {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.subnav__list {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content;
}

.subnav__tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-hair);
  padding: 11px 18px;
  font-family: var(--ui);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.subnav__tab:first-child {
  padding-left: 2px;
}

.subnav__tab:hover {
  color: var(--red);
}

.subnav__tab.is-active {
  color: var(--white);
  background: var(--ink);
}

/* ---------- Layout ---------- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
}

.primary {
  min-width: 0;
}

/* ---------- Lead ---------- */
.lead {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 28px;
  margin-bottom: 6px;
}

.lead__figure {
  margin: 0;
}

.lead__body {
  min-width: 0;
}

.kicker {
  margin: 0 0 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.lead__headline {
  margin: 0 0 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.55rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
}

.lead__headline a {
  color: var(--ink);
  text-decoration: none;
}

.lead__headline a:hover {
  color: var(--red-d);
}

.lead__dek {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.32;
  color: var(--ink-2);
}

.byline {
  margin: 0 0 14px;
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.byline__name {
  color: var(--ink-2);
  font-weight: 600;
}

.dateline {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.readtime {
  font-style: italic;
}

.byline--sm {
  font-size: 0.74rem;
  margin-bottom: 0;
}

.lead__lede,
.lead__cont {
  margin: 0 0 12px;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-2);
  text-align: justify;
  hyphens: auto;
}

.lead__lede::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 800;
  font-size: 3.6em;
  line-height: 0.72;
  padding: 6px 10px 0 0;
  color: var(--ink);
}

.pullquote {
  margin: 18px 0;
  padding: 14px 0 14px 18px;
  border-left: 3px solid var(--red);
  font-family: var(--display);
  font-size: 1.32rem;
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
}

.pullquote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- Press photos (CSS-simulated imagery) ---------- */
.press-photo {
  position: relative;
  width: 100%;
  border-radius: var(--r-sm);
  overflow: hidden;
  background-color: var(--ink-3);
  background-blend-mode: multiply, screen, normal;
  box-shadow: inset 0 0 0 1px var(--rule);
}

.press-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(22, 19, 15, 0.16) 1px, transparent 1.4px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

.press-photo--lead {
  aspect-ratio: 4 / 3;
  background-image:
    linear-gradient(180deg, rgba(22, 19, 15, 0.55), rgba(22, 19, 15, 0.05) 60%, rgba(180, 41, 31, 0.28)),
    radial-gradient(60% 50% at 30% 20%, rgba(244, 239, 228, 0.55), transparent 70%),
    linear-gradient(120deg, #3a2f28, #6a4a3a 45%, #2a2622);
}

.teaser__figure .press-photo {
  aspect-ratio: 16 / 10;
}

.press-photo--harbor {
  background-image:
    linear-gradient(180deg, rgba(244, 239, 228, 0.4), transparent 40%),
    linear-gradient(90deg, rgba(22, 19, 15, 0.5), transparent 50%, rgba(22, 19, 15, 0.5)),
    linear-gradient(160deg, #233140, #4a6072 60%, #1c242c);
}

.press-photo--drought {
  background-image:
    radial-gradient(80% 50% at 50% 80%, rgba(180, 41, 31, 0.25), transparent 70%),
    linear-gradient(180deg, #c79a5a, #8a5e34 55%, #5a3c22);
}

.press-photo--city {
  background-image:
    radial-gradient(50% 60% at 60% 70%, rgba(255, 220, 150, 0.4), transparent 70%),
    linear-gradient(180deg, #2a2440 10%, #5a3a55 60%, #1a1626);
}

.press-photo--market {
  background-image:
    radial-gradient(60% 50% at 40% 60%, rgba(255, 196, 110, 0.45), transparent 70%),
    linear-gradient(170deg, #4a2f1e, #7a4a26 55%, #2e1d12);
}

.press-photo--snow {
  background-image:
    radial-gradient(40% 40% at 55% 55%, rgba(255, 236, 200, 0.5), transparent 70%),
    linear-gradient(180deg, #c4ccd6, #8e9aa6 60%, #5a636e);
}

.press-photo--temple {
  background-image:
    radial-gradient(50% 50% at 50% 40%, rgba(244, 220, 180, 0.4), transparent 70%),
    linear-gradient(160deg, #5a2420, #93423a 55%, #341c1a);
}

.press-photo--coast {
  background-image:
    linear-gradient(180deg, rgba(244, 239, 228, 0.35), transparent 50%),
    linear-gradient(150deg, #3a4650, #62727e 60%, #28323a);
}

.press-photo--ice {
  background-image:
    radial-gradient(60% 40% at 50% 30%, rgba(255, 255, 255, 0.45), transparent 70%),
    linear-gradient(170deg, #aab8c4, #6e8794 55%, #3c4e58);
}

.press-photo--savanna {
  background-image:
    radial-gradient(60% 60% at 60% 70%, rgba(255, 180, 110, 0.5), transparent 70%),
    linear-gradient(180deg, #e0a84e, #b06a30 55%, #5a3618);
}

.press-photo--rail {
  background-image:
    radial-gradient(40% 50% at 50% 65%, rgba(255, 196, 110, 0.4), transparent 70%),
    linear-gradient(180deg, #2a2722, #4a3f33 55%, #16130f);
}

.press-photo--terrace {
  background-image:
    radial-gradient(60% 40% at 50% 30%, rgba(220, 230, 220, 0.45), transparent 70%),
    linear-gradient(170deg, #5a6e4a, #8aa06a 55%, #3a482e);
}

.press-photo--forest {
  background-image:
    radial-gradient(50% 50% at 45% 75%, rgba(120, 170, 90, 0.45), transparent 70%),
    linear-gradient(180deg, #2a2620, #4a3a2a 50%, #1c2418);
}

.press-photo--savanna,
.press-photo--terrace,
.press-photo--forest {
  background-blend-mode: normal;
}

.caption {
  margin-top: 8px;
  font-size: 0.8rem;
  font-style: italic;
  font-family: var(--display);
  color: var(--ink-3);
  line-height: 1.4;
}

.credit {
  display: block;
  margin-top: 2px;
  font-family: var(--ui);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Teaser grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 32px;
  column-rule: 1px solid var(--rule-hair);
}

.teaser {
  min-width: 0;
  position: relative;
  padding-top: 4px;
  border-top: 1px solid var(--rule);
}

.teaser.is-removed {
  display: none;
}

.teaser__figure {
  margin: 0 0 12px;
}

.teaser__headline {
  margin: 0 0 8px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.12;
}

.teaser__headline a {
  color: var(--ink);
  text-decoration: none;
}

.teaser__headline a:hover {
  color: var(--red-d);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.teaser__dek {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* ---------- Load more ---------- */
.loadmore {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 3px double var(--rule-2);
  text-align: center;
}

.btn-loadmore {
  appearance: none;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-sm);
  padding: 12px 28px;
  font-family: var(--ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-loadmore:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-loadmore[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-loadmore__rem {
  font-weight: 500;
  opacity: 0.7;
  margin-left: 6px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  min-width: 0;
}

.sidebar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.2rem;
}

.sidebar__head-tag {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
}

.mostread__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.mostread__item {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-hair);
}

.mostread__item:last-child {
  border-bottom: 0;
}

.mostread__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--red);
}

.mostread__link {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
}

.mostread__link:hover {
  color: var(--red-d);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.editors__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.editors__item {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-hair);
}

.editors__item:last-child {
  border-bottom: 0;
}

.editors__item .kicker {
  margin-bottom: 5px;
}

.editors__headline {
  margin: 0 0 5px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.15;
}

.editors__headline a {
  color: var(--ink);
  text-decoration: none;
}

.editors__headline a:hover {
  color: var(--red-d);
}

/* ---------- Newsletter ---------- */
.newsletter {
  background: var(--newsprint);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 18px;
}

.newsletter__kicker {
  margin: 0 0 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}

.newsletter__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.4rem;
}

.newsletter__copy {
  margin: 0 0 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-3);
}

.newsletter__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.newsletter__input {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--ui);
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: var(--r-sm);
}

.newsletter__input.is-error {
  border-color: var(--danger);
  background: var(--red-50);
}

.newsletter__btn {
  appearance: none;
  padding: 11px 14px;
  font-family: var(--ui);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--red);
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.newsletter__btn:hover {
  background: var(--red-d);
}

/* ---------- Footer ---------- */
.footer {
  border-top: 3px double var(--rule-2);
  background: var(--paper);
  text-align: center;
  padding: 26px 24px 36px;
}

.footer__name {
  margin: 0 0 4px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.3rem;
}

.footer__copy {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--paper);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  box-shadow: 0 6px 22px rgba(22, 19, 15, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 60;
  max-width: 90vw;
}

.toast.is-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.toast__accent {
  color: var(--red-50);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin-right: 8px;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .sidebar {
    border-top: 3px double var(--rule-2);
    padding-top: 24px;
  }
}

@media (max-width: 720px) {
  .lead {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 22px 16px 44px;
  }
  .masthead__inner {
    padding: 14px 16px 12px;
  }
  .section-head__row {
    flex-direction: column;
    gap: 4px;
  }
  .pullquote {
    font-size: 1.16rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

(function () {
  "use strict";

  var BATCH = 4; // how many hidden teasers a "load more" click reveals

  var grid = document.getElementById("teaser-grid");
  var tabs = Array.prototype.slice.call(document.querySelectorAll(".subnav__tab"));
  var loadMoreBtn = document.getElementById("load-more");
  var remainingEl = document.getElementById("remaining-count");
  var countEl = document.getElementById("result-count");
  var leadEl = document.querySelector(".lead");
  var form = document.getElementById("news-form");
  var emailInput = document.getElementById("news-email");
  var toastEl = document.getElementById("toast");

  if (!grid) return;

  var teasers = Array.prototype.slice.call(grid.querySelectorAll(".teaser"));
  var currentFilter = "all";
  var toastTimer = null;

  /* ---------------- toast helper ---------------- */
  function toast(msg, label) {
    if (!toastEl) return;
    toastEl.innerHTML = "";
    if (label) {
      var tag = document.createElement("span");
      tag.className = "toast__accent";
      tag.textContent = label;
      toastEl.appendChild(tag);
    }
    toastEl.appendChild(document.createTextNode(msg));
    toastEl.classList.add("is-show");
    if (toastTimer) clearTimeout(toastTimer);
    toastTimer = setTimeout(function () {
      toastEl.classList.remove("is-show");
    }, 2600);
  }

  /* ---------------- matching ---------------- */
  function matchesFilter(el) {
    return currentFilter === "all" || el.getAttribute("data-region") === currentFilter;
  }

  // Teasers that match the current filter AND are not collapsed by load-more.
  function visibleMatching() {
    return teasers.filter(function (el) {
      return matchesFilter(el) && !el.classList.contains("is-hidden");
    });
  }

  // Teasers that match the filter but are still collapsed (waiting for load-more).
  function collapsedMatching() {
    return teasers.filter(function (el) {
      return matchesFilter(el) && el.classList.contains("is-hidden");
    });
  }

  function totalMatching() {
    return teasers.filter(matchesFilter);
  }

  /* ---------------- rendering ---------------- */
  function render() {
    // Show or remove each teaser based on filter; collapsed state is preserved
    // so "load more" still works inside a filtered view.
    teasers.forEach(function (el) {
      if (matchesFilter(el)) {
        el.classList.remove("is-removed");
      } else {
        el.classList.add("is-removed");
      }
    });

    var collapsed = collapsedMatching().length;
    if (collapsed > 0) {
      loadMoreBtn.removeAttribute("disabled");
      loadMoreBtn.style.display = "";
      loadMoreBtn.childNodes[0].nodeValue = "Load more stories ";
      remainingEl.textContent = "(" + collapsed + " more)";
    } else {
      loadMoreBtn.style.display = "none";
      remainingEl.textContent = "";
    }

    updateCount();
  }

  function updateCount() {
    var shown = visibleMatching().length;
    var total = totalMatching().length;
    // include the lead story in the section total when on All / its region
    var leadCounts =
      leadEl &&
      (currentFilter === "all" || leadEl.getAttribute("data-region") === currentFilter);
    var totalWithLead = total + (leadCounts ? 1 : 0);
    var shownWithLead = shown + (leadCounts ? 1 : 0);

    if (countEl) {
      var noun = totalWithLead === 1 ? "story" : "stories";
      if (shownWithLead < totalWithLead) {
        countEl.textContent = "Showing " + shownWithLead + " of " + totalWithLead + " " + noun;
      } else {
        countEl.textContent = totalWithLead + " " + noun;
      }
    }
  }

  /* ---------------- tab filtering ---------------- */
  function selectTab(tab) {
    var filter = tab.getAttribute("data-filter");
    currentFilter = filter;

    tabs.forEach(function (t) {
      var active = t === tab;
      t.classList.toggle("is-active", active);
      t.setAttribute("aria-selected", active ? "true" : "false");
    });

    render();

    // toggle lead visibility to match the filtered view
    if (leadEl) {
      var leadVisible =
        filter === "all" || leadEl.getAttribute("data-region") === filter;
      leadEl.style.display = leadVisible ? "" : "none";
    }

    var label = tab.textContent.trim();
    var n = totalMatching().length + (leadEl && (filter === "all" || leadEl.getAttribute("data-region") === filter) ? 1 : 0);
    toast(
      n + (n === 1 ? " story" : " stories") + " in " + label,
      "Filter"
    );
  }

  tabs.forEach(function (tab) {
    tab.addEventListener("click", function () {
      selectTab(tab);
    });
    // keyboard arrow navigation across the tablist
    tab.addEventListener("keydown", function (e) {
      var idx = tabs.indexOf(tab);
      var next = null;
      if (e.key === "ArrowRight" || e.key === "ArrowDown") next = tabs[(idx + 1) % tabs.length];
      if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = tabs[(idx - 1 + tabs.length) % tabs.length];
      if (next) {
        e.preventDefault();
        next.focus();
        selectTab(next);
      }
    });
  });

  /* ---------------- load more ---------------- */
  loadMoreBtn.addEventListener("click", function () {
    var collapsed = collapsedMatching();
    if (!collapsed.length) return;

    var slice = collapsed.slice(0, BATCH);
    slice.forEach(function (el, i) {
      el.classList.remove("is-hidden");
      // gentle entrance
      el.style.opacity = "0";
      el.style.transform = "translateY(8px)";
      requestAnimationFrame(function () {
        setTimeout(function () {
          el.style.transition = "opacity .3s ease, transform .3s ease";
          el.style.opacity = "1";
          el.style.transform = "none";
        }, i * 60);
      });
    });

    render();

    var left = collapsedMatching().length;
    if (left > 0) {
      toast("Loaded " + slice.length + " more · " + left + " remaining", "More");
    } else {
      toast("You're all caught up in this section.", "End");
    }
  });

  /* ---------------- newsletter form ---------------- */
  if (form) {
    form.addEventListener("submit", function (e) {
      e.preventDefault();
      var val = (emailInput.value || "").trim();
      var ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
      if (!ok) {
        emailInput.classList.add("is-error");
        emailInput.focus();
        toast("Please enter a valid email address.", "Error");
        return;
      }
      emailInput.classList.remove("is-error");
      emailInput.value = "";
      toast("Subscribed to The World Briefing.", "Done");
    });
    emailInput.addEventListener("input", function () {
      emailInput.classList.remove("is-error");
    });
  }

  /* ---------------- init ---------------- */
  render();
})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>World — The Meridian Standard</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=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;0,900;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <a class="skip-link" href="#section-main">Skip to section content</a>

  <header class="masthead" role="banner">
    <div class="masthead__inner">
      <p class="masthead__dateline">Thursday, June 8, 2026 · Late City Edition · No. 49,213</p>
      <a class="masthead__logo" href="#" aria-label="The Meridian Standard — home">The Meridian Standard</a>
      <p class="masthead__strap">Independent reporting since 1908 · &ldquo;The record of record&rdquo;</p>
    </div>
    <nav class="topnav" aria-label="Primary sections">
      <ul class="topnav__list">
        <li><a href="#" aria-current="page">World</a></li>
        <li><a href="#">Nation</a></li>
        <li><a href="#">Business</a></li>
        <li><a href="#">Sports</a></li>
        <li><a href="#">Culture</a></li>
        <li><a href="#">Opinion</a></li>
        <li><a href="#">Science</a></li>
      </ul>
    </nav>
  </header>

  <main id="section-main" class="wrap">
    <!-- Section header -->
    <div class="section-head">
      <div class="section-head__row">
        <h1 class="section-head__title">World</h1>
        <p class="section-head__count" id="result-count">28 stories</p>
      </div>
      <p class="section-head__dek">Dispatches and analysis from our correspondents across six continents — conflict, diplomacy, climate, and the lives caught between.</p>
    </div>

    <!-- Sub-nav tabs -->
    <nav class="subnav" aria-label="World sub-sections">
      <ul class="subnav__list" role="tablist">
        <li role="presentation"><button class="subnav__tab is-active" role="tab" aria-selected="true" data-filter="all">All</button></li>
        <li role="presentation"><button class="subnav__tab" role="tab" aria-selected="false" data-filter="europe">Europe</button></li>
        <li role="presentation"><button class="subnav__tab" role="tab" aria-selected="false" data-filter="asia">Asia &amp; Pacific</button></li>
        <li role="presentation"><button class="subnav__tab" role="tab" aria-selected="false" data-filter="americas">Americas</button></li>
        <li role="presentation"><button class="subnav__tab" role="tab" aria-selected="false" data-filter="africa">Africa</button></li>
        <li role="presentation"><button class="subnav__tab" role="tab" aria-selected="false" data-filter="climate">Climate</button></li>
      </ul>
    </nav>

    <div class="layout">
      <!-- Primary column -->
      <div class="primary">
        <!-- Lead story -->
        <article class="lead" data-region="europe">
          <figure class="lead__figure">
            <div class="press-photo press-photo--lead" role="img" aria-label="Crowds gathered before a parliament building at dusk under a banked sky."></div>
            <figcaption class="caption">
              Demonstrators fill Republic Square as the coalition vote went late into the night.
              <span class="credit">Photograph by Ilse Vandermeer / The Meridian Standard</span>
            </figcaption>
          </figure>
          <div class="lead__body">
            <p class="kicker">Europe · The Continent's Center</p>
            <h2 class="lead__headline"><a href="#">A Fragile Coalition Holds, but the Cost of Power Comes Due in Brussels</a></h2>
            <p class="lead__dek">After eleven hours of closed-door bargaining, three parties agreed on a budget. Whether their voters will forgive the compromises is the harder question.</p>
            <p class="byline">By <span class="byline__name">Marisol Kennard</span> and <span class="byline__name">Tomas Reilly</span> · <span class="dateline">BRUSSELS</span> · <span class="readtime">8 min read</span></p>
            <p class="lead__lede">The deal was sealed at a quarter to four in the morning, in a room where the coffee had long gone cold and the ashtrays — officially banned for two decades — had quietly reappeared. By dawn, the coalition had a budget, a majority of one, and a list of promises it could not all keep.</p>
            <p class="lead__cont">Negotiators described a process less like governing than like triage, each party defending the program it could least afford to lose. The agreement preserves energy subsidies through winter but defers the pension reform that markets had demanded — a sequencing that satisfied no one and held the government together all the same.</p>
            <blockquote class="pullquote">
              &ldquo;We did not build a future tonight. We bought ourselves time to argue about one.&rdquo;
              <cite>— A senior negotiator, granted anonymity to describe private talks</cite>
            </blockquote>
            <p class="lead__cont">Across the square, the demonstrators read the outcome differently. To them the survival of the coalition was not stability but stalemate dressed in a press release, and they said as much, in three languages, until the rain sent them home.</p>
          </div>
        </article>

        <hr class="rule" />

        <!-- Teaser grid -->
        <section aria-labelledby="grid-label">
          <h2 id="grid-label" class="sr-only">More from World</h2>
          <div class="grid" id="teaser-grid">

            <article class="teaser" data-region="asia">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--harbor" role="img" aria-label="Container cranes silhouetted over a busy harbor at first light."></div>
              </figure>
              <p class="kicker">Asia &amp; Pacific</p>
              <h3 class="teaser__headline"><a href="#">Port Workers' Strike Ripples Through a Region Built on Speed</a></h3>
              <p class="teaser__dek">A walkout at the world's third-busiest container terminal has stranded cargo from Hamburg to Long Beach.</p>
              <p class="byline byline--sm">By Priya Anand · <span class="dateline">SINGAPORE</span></p>
            </article>

            <article class="teaser" data-region="climate">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--drought" role="img" aria-label="A cracked riverbed stretching toward distant hills under a hazed orange sky."></div>
              </figure>
              <p class="kicker">Climate</p>
              <h3 class="teaser__headline"><a href="#">The River That Vanished, and the Town That Stayed Anyway</a></h3>
              <p class="teaser__dek">For three generations the Calumar fed the valley. Its disappearance is rewriting what it means to belong here.</p>
              <p class="byline byline--sm">By Esther Quill · <span class="dateline">VALLE SECO</span></p>
            </article>

            <article class="teaser" data-region="americas">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--city" role="img" aria-label="A grid of city lights bleeding into a violet horizon."></div>
              </figure>
              <p class="kicker">Americas</p>
              <h3 class="teaser__headline"><a href="#">A Mayor's Quiet Experiment Becomes a National Argument</a></h3>
              <p class="teaser__dek">The cash-transfer program was meant to last a year. Now both parties want to claim — or bury — it.</p>
              <p class="byline byline--sm">By Daniel Okafor · <span class="dateline">CORDELIA</span></p>
            </article>

            <article class="teaser" data-region="africa">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--market" role="img" aria-label="A market lane warm with lamplight, awnings overlapping above the crowd."></div>
              </figure>
              <p class="kicker">Africa</p>
              <h3 class="teaser__headline"><a href="#">The Grid Came On at Last. Keeping It On Is the Real Fight.</a></h3>
              <p class="teaser__dek">A solar microgrid lit a district that the national utility had written off. Its success has made it a target.</p>
              <p class="byline byline--sm">By Naima Sow · <span class="dateline">KOROBA</span></p>
            </article>

            <article class="teaser" data-region="europe">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--snow" role="img" aria-label="A snowbound border crossing, headlamps cutting through falling flakes."></div>
              </figure>
              <p class="kicker">Europe</p>
              <h3 class="teaser__headline"><a href="#">At the Coldest Border, a Thaw No One Will Name Out Loud</a></h3>
              <p class="teaser__dek">Trade quietly resumed last month across a frontier that has been formally closed for six years.</p>
              <p class="byline byline--sm">By Lukas Brenner · <span class="dateline">NARVA</span></p>
            </article>

            <article class="teaser" data-region="asia">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--temple" role="img" aria-label="Lantern smoke rising before a tiered temple roof at evening."></div>
              </figure>
              <p class="kicker">Asia &amp; Pacific</p>
              <h3 class="teaser__headline"><a href="#">A Festival Returns, and With It a Reckoning Over Who It's For</a></h3>
              <p class="teaser__dek">After a decade's pause, the procession drew a million pilgrims — and a debate about heritage and crowds.</p>
              <p class="byline byline--sm">By Mei-Lin Soh · <span class="dateline">HARAPRA</span></p>
            </article>

            <article class="teaser is-hidden" data-region="americas">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--coast" role="img" aria-label="A storm-battered coastline, surf breaking grey against a stilted pier."></div>
              </figure>
              <p class="kicker">Americas</p>
              <h3 class="teaser__headline"><a href="#">When the Insurance Left, the Carpenters Stayed</a></h3>
              <p class="teaser__dek">On a coast deemed uninsurable, a barter economy of repair has taken root among the rebuilders.</p>
              <p class="byline byline--sm">By Rosa Villalba · <span class="dateline">PORT EMORY</span></p>
            </article>

            <article class="teaser is-hidden" data-region="climate">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--ice" role="img" aria-label="A research vessel dwarfed by a pale wall of fractured ice."></div>
              </figure>
              <p class="kicker">Climate</p>
              <h3 class="teaser__headline"><a href="#">The Last Long Record of the Ice Is Being Read in Reverse</a></h3>
              <p class="teaser__dek">A drilling team is racing to pull a core that may hold a million years before the shelf gives way.</p>
              <p class="byline byline--sm">By Anders Holt · <span class="dateline">ABOARD THE FRØYA</span></p>
            </article>

            <article class="teaser is-hidden" data-region="africa">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--savanna" role="img" aria-label="A lone acacia against a wash of gold and rose at sundown."></div>
              </figure>
              <p class="kicker">Africa</p>
              <h3 class="teaser__headline"><a href="#">A Library Built From Memory, One Recorded Voice at a Time</a></h3>
              <p class="teaser__dek">With the last fluent speakers in their eighties, a collective is racing to archive a language before silence.</p>
              <p class="byline byline--sm">By Kwame Asante · <span class="dateline">TENERE</span></p>
            </article>

            <article class="teaser is-hidden" data-region="europe">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--rail" role="img" aria-label="An empty night platform, rails curving away under amber lamps."></div>
              </figure>
              <p class="kicker">Europe</p>
              <h3 class="teaser__headline"><a href="#">The Night Train Came Back. So Did an Argument About Slowness.</a></h3>
              <p class="teaser__dek">Sleeper routes are multiplying across the continent, recasting distance as a feature rather than a flaw.</p>
              <p class="byline byline--sm">By Sofia Marchetti · <span class="dateline">VIENNA</span></p>
            </article>

            <article class="teaser is-hidden" data-region="asia">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--terrace" role="img" aria-label="Flooded rice terraces stepping down a misted hillside."></div>
              </figure>
              <p class="kicker">Asia &amp; Pacific</p>
              <h3 class="teaser__headline"><a href="#">The Terraces Held for a Thousand Years. The Young Are Leaving Anyway.</a></h3>
              <p class="teaser__dek">A heritage farming system survives the weather but may not survive the math of a single generation.</p>
              <p class="byline byline--sm">By Rahul Devi · <span class="dateline">BANAUE</span></p>
            </article>

            <article class="teaser is-hidden" data-region="climate">
              <figure class="teaser__figure">
                <div class="press-photo press-photo--forest" role="img" aria-label="A burned forest greening again, new shoots rising from blackened soil."></div>
              </figure>
              <p class="kicker">Climate</p>
              <h3 class="teaser__headline"><a href="#">After the Fire, an Argument Over What 'Recovery' Should Even Mean</a></h3>
              <p class="teaser__dek">Foresters want to replant fast. Ecologists want to wait. The land, for now, is deciding for them.</p>
              <p class="byline byline--sm">By Helena Cruz · <span class="dateline">SIERRA ALTA</span></p>
            </article>

          </div>

          <div class="loadmore">
            <button class="btn-loadmore" id="load-more" type="button">Load more stories
              <span class="btn-loadmore__rem" id="remaining-count"></span>
            </button>
          </div>
        </section>
      </div>

      <!-- Sidebar -->
      <aside class="sidebar" aria-label="Section extras">
        <section class="mostread">
          <h2 class="sidebar__head"><span>Most Read</span><span class="sidebar__head-tag">in World</span></h2>
          <ol class="mostread__list">
            <li class="mostread__item">
              <span class="mostread__num">1</span>
              <a class="mostread__link" href="#">Inside the eleven-hour night that nearly broke the coalition</a>
            </li>
            <li class="mostread__item">
              <span class="mostread__num">2</span>
              <a class="mostread__link" href="#">She mapped a vanished river from memory. Hydrologists are listening.</a>
            </li>
            <li class="mostread__item">
              <span class="mostread__num">3</span>
              <a class="mostread__link" href="#">Why the world's busiest port stopped — and what it revealed</a>
            </li>
            <li class="mostread__item">
              <span class="mostread__num">4</span>
              <a class="mostread__link" href="#">A mayor's cash experiment becomes the country's loudest fight</a>
            </li>
            <li class="mostread__item">
              <span class="mostread__num">5</span>
              <a class="mostread__link" href="#">The microgrid that lit a district the state forgot</a>
            </li>
          </ol>
        </section>

        <hr class="rule" />

        <section class="editors">
          <h2 class="sidebar__head"><span>Editor's Picks</span></h2>
          <ul class="editors__list">
            <li class="editors__item">
              <p class="kicker">Opinion</p>
              <h3 class="editors__headline"><a href="#">The case for boredom in an age that monetized every idle minute</a></h3>
              <p class="byline byline--sm">By the Editorial Board</p>
            </li>
            <li class="editors__item">
              <p class="kicker">Science</p>
              <h3 class="editors__headline"><a href="#">A tiny moth, a continent's harvest, and the math of one bad year</a></h3>
              <p class="byline byline--sm">By Cordelia Hayes</p>
            </li>
            <li class="editors__item">
              <p class="kicker">Culture</p>
              <h3 class="editors__headline"><a href="#">The novelist who wrote one book, then spent forty years revising it</a></h3>
              <p class="byline byline--sm">By Theo Marchand</p>
            </li>
          </ul>
        </section>

        <hr class="rule" />

        <aside class="newsletter" aria-label="Newsletter signup">
          <p class="newsletter__kicker">From the desk</p>
          <h3 class="newsletter__title">The World Briefing</h3>
          <p class="newsletter__copy">Six datelines, one morning email. Our correspondents on what actually moved overnight.</p>
          <form class="newsletter__form" id="news-form" novalidate>
            <label class="sr-only" for="news-email">Email address</label>
            <input class="newsletter__input" id="news-email" type="email" inputmode="email" placeholder="[email protected]" autocomplete="email" required />
            <button class="newsletter__btn" type="submit">Subscribe</button>
          </form>
        </aside>
      </aside>
    </div>
  </main>

  <footer class="footer" role="contentinfo">
    <p class="footer__name">The Meridian Standard</p>
    <p class="footer__copy">A fictional newspaper. All names, datelines, and stories are invented for demonstration.</p>
  </footer>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>

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

Section Index

A full World-desk section page for the fictional Meridian Standard, art-directed in the classic newsprint manner. A double-rule masthead and uppercase primary nav sit above a red-ruled section header, a single-line dek set in italic display type, and a live story count. Beneath, a lead story spans a captioned, CSS-gradient press photo and a justified column with a drop cap, a sparingly used red kicker, a datelined byline with read-time, and an oversized serif pull quote.

The body is a strict two-column teaser grid — each card pairing a duotone-ink gradient figure with a kicker, serif headline, short dek, and a small datelined byline — flanked by a sidebar carrying a numbered Most Read list, Editor’s Picks, and a World Briefing signup. Hairline rules separate every block; the single accent red is reserved for kickers, the active tab, and link hovers.

The sub-section tabs filter the grid by region (Europe, Asia & Pacific, Americas, Africa, Climate), updating the lead and the headline count and announcing the result via a toast. A Load more stories control reveals collapsed dispatches in batches and reports how many remain, the tablist is fully keyboard-navigable with arrow keys, and the briefing form validates its email inline with success and error feedback.

Illustrative UI only — masthead, headlines, bylines, and articles are fictional; not a real news publication.