/* wgs.ie — the long-form article template.
 *
 * Shared by every article page (/about/, /sequence-type/, and whatever comes
 * next). Depends on tokens.css for the palette and the three faces, so link
 * tokens.css first.
 *
 * Extracted 2026-09-02 when a second article arrived. It had lived inline in
 * about/index.html, which README described as "the long-form template" —
 * this makes that literally true rather than aspirational.
 *
 * Deliberately leaner than the front page: a compact masthead, a 700px
 * measure, no nav, no feed.
 */

/* Token values are duplicated from index.html — see README. --ink3 must not be
   lightened past #6e6a63 in either file. */
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--serif);
  font-size: 17px; line-height: 1.7;
  max-width: 1280px; margin: 0 auto; padding: 0 0 80px;
}
a { color: inherit; }


/* ── MASTHEAD (lean variant) ── */
.masthead {
  border-bottom: 2.5px solid var(--ink);
  padding: 24px 40px 16px;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.site-name {
  font-family: var(--display); font-size: 30px;
  font-weight: 600; letter-spacing: -0.4px; line-height: 1;
  text-decoration: none;
}
.site-name em { font-style: italic; color: var(--accent); }
.masthead a.site-name:focus-visible,
.back-link:focus-visible, .article-body a:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
}
.back-link {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink3); text-decoration: none;
}
.back-link:hover { color: var(--ink); }

/* ── ARTICLE ── */
.article { max-width: 700px; margin: 0 auto; padding: 52px 40px 0; }
.article-kicker {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent2); margin-bottom: 14px;
}
.article-title {
  font-family: var(--display); font-size: 42px;
  font-weight: 600; line-height: 1.12; letter-spacing: -0.5px;
}
.article-meta {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3);
  margin-top: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.article-body { padding-top: 26px; }
.article-body p { margin-bottom: 20px; }
.article-body .lede { font-size: 19px; line-height: 1.62; color: var(--ink2); }
/* Every article opens on its first word in caps. House convention, so it goes
   on .article-body .opener and not on one page.
   `text-transform`, not capitals typed into the markup: the underlying text
   stays a lowercase word, so a screen reader reads "ninety" rather than
   spelling out an initialism. Tracked, because caps set at running-text
   spacing read as shouting. */
.article-body .opener {
  text-transform: uppercase; letter-spacing: 0.09em;
  font-weight: 600; font-size: 0.92em;
}
/* The second half of the lede. A step below the lede and a step above body, so
   the entry into a piece is graded rather than a cliff. */
.article-body .lede-follow { font-size: 18px; line-height: 1.6; color: var(--ink2); }
/* Subheads within a section. Smaller than h2 and without its own rule, so the
   h2 above it still reads as the section boundary. */
.article-body h3 {
  font-family: var(--display); font-size: 18px;
  font-weight: 600; line-height: 1.35; margin: 28px 0 10px;
}
.article-body h2 {
  font-family: var(--display); font-size: 22px;
  font-weight: 600; line-height: 1.3; margin: 38px 0 14px;
}
.article-body a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.article-body em { font-style: italic; }
.article-body code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--paper2); padding: 2px 6px; border-radius: 3px;
}

.stat-line {
  display: flex; flex-wrap: wrap; gap: 0 34px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 18px 0; margin: 28px 0;
}
.stat { flex: 1 1 auto; min-width: 150px; }
.stat-num {
  font-family: var(--display); font-size: 27px; line-height: 1.1;
  color: var(--accent);
}
.stat-cap {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3);
  margin-top: 5px;
}

.commitment {
  border-left: 2.5px solid var(--accent); padding: 4px 0 4px 16px;
  margin: 22px 0; font-size: 16.5px; color: var(--ink2);
}
.commitment strong { color: var(--ink); font-weight: 600; }

.pull {
  font-family: var(--display); font-size: 25px;
  line-height: 1.36; color: var(--ink);
  border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink);
  padding: 22px 0; margin: 34px 0;
}

.disclosure {
  background: var(--paper2); border: 1px solid var(--rule); border-radius: 4px;
  padding: 20px 22px; margin: 30px 0; font-size: 16px; color: var(--ink2);
}
.disclosure-label {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.disclosure p:last-child { margin-bottom: 0; }

/* Used by article pages for a sources list. The charter carried a query
   revision log in this shape until 2026-09-02; that was removed as premature
   with three entries inside 48 hours, and the promise moved to "available on
   request". If a public log comes back, this is the styling for it. */
.revlog { margin: 24px 0 0; }
.revlog dt {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  margin-top: 22px; padding-top: 15px; border-top: 1px solid var(--rule);
}
.revlog dt:first-of-type { margin-top: 0; }
.revlog dd { margin: 8px 0 0; font-size: 16px; color: var(--ink2); }

.article-end {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink3);
}
.article-end a { color: var(--accent); text-decoration: none; }
.article-end a:hover { text-decoration: underline; }

/* ── FOOTER ── */
.site-footer {
  max-width: 700px; margin: 48px auto 0; padding: 18px 40px 0;
  border-top: 2.5px solid var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px;
}
.footer-name { font-family: var(--display); font-size: 18px; text-decoration: none; }
.footer-name em { font-style: italic; color: var(--accent); }
.footer-copy {
  width: 100%; font-family: var(--mono);
  font-size: 9px; color: var(--ink3); padding-top: 10px;
}

@media (max-width: 768px) {
  body { font-size: 16.5px; }
  .masthead { padding: 18px 18px 12px; }
  .article { padding: 34px 18px 0; }
  .article-title { font-size: 31px; }
  .article-body .lede { font-size: 18px; }
  .article-body .lede-follow { font-size: 17px; }
  .pull { font-size: 21px; }
  .site-footer { padding: 18px 18px 0; }
}