/* Long-form reading styles for /writing/ — extends the site tokens in styles.css.
   The home page is a display surface; an article has to hold attention for ~12
   minutes, so every value here is settled on reading comfort first and the
   site's display voice second. */

.page-shell--article {
  /* Article pages run full-bleed: the side gutter matches the top one instead
     of the home page's wide reading inset. */
  --page-x: var(--page-top);
  overflow: visible;
}

.page-shell--article .topbar {
  margin-bottom: 0;
}

/* Header ----------------------------------------------------------------- */

.topbar--article {
  justify-content: space-between;
  gap: clamp(16px, 2vw, 40px);
}

.topbar__home {
  font-size: var(--topbar-size);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  transition: opacity 180ms ease;
}

.topbar__home:hover,
.topbar__home:focus-visible {
  opacity: 0.6;
}

/* Reading progress ------------------------------------------------------- */

.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  height: 2px;
  pointer-events: none;
}

.reading-progress__bar {
  display: block;
  height: 100%;
  background: rgba(var(--text-rgb), 0.5);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

/* Tokens ----------------------------------------------------------------- */

.article {
  /* The title runs the full page width; everything else sits on one measure.
     Figures and the quote rule step outside that measure symmetrically via
     --article-bleed, so nothing reads as accidentally off-axis. */
  --article-measure: min(100%, 38rem);
  --article-bleed: clamp(0px, 3.2vw, 56px);

  --article-title-size: clamp(44px, 12.2vw, 196px);
  --article-deck-size: clamp(18px, 1.35vw, 21px);
  --article-h2-size: clamp(24px, 2vw, 30px);
  --article-h3-size: clamp(19px, 1.45vw, 22px);
  --article-body-size: clamp(16px, 0.5rem + 0.7vw, 18px);
  --article-meta-size: clamp(13px, 0.95vw, 14px);

  /* The site's --muted (0.28 alpha) is a display device: at reading sizes it
     lands near 2:1 contrast. Long-form secondary text gets its own scale,
     which clears WCAG AA in both themes. */
  --article-ink-2: rgba(var(--text-rgb), 0.68);
  --article-ink-3: rgba(var(--text-rgb), 0.58);
  --article-rule: rgba(var(--text-rgb), 0.14);
  --article-quote-stripe: rgba(var(--text-rgb), 0.4);
  --article-underline: rgba(var(--text-rgb), 0.34);

  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0 auto;
  padding-bottom: calc(var(--space-x) * 3);
  text-align: left;
  animation: rise-in 820ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Everything except the title lives on the measure, centred in the page. */
.article__intro,
.article__body,
.article__footer {
  width: var(--article-measure);
  margin-inline: auto;
}

.article a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Back link -------------------------------------------------------------- */

.article__home {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: var(--article-meta-size);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--article-ink-3);
  transition: color 180ms ease;
}

.article__home:hover,
.article__home:focus-visible {
  color: var(--text);
}

.article__home-arrow {
  width: 1.05em;
  height: 1.05em;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.article__home:hover .article__home-arrow,
.article__home:focus-visible .article__home-arrow {
  transform: translateX(-3px);
}

/* Header ----------------------------------------------------------------- */

.article__header {
  margin-bottom: clamp(30px, 4vw, 44px);
}

/* Full page width, centred — the one display moment on the page. */
.article__title {
  width: 100%;
  margin: var(--space-x) 0 var(--space-x);
  font-size: var(--article-title-size);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.06;
  text-align: center;
  text-wrap: balance;
}

.article__deck {
  margin: 0 0 clamp(22px, 2.6vw, 32px);
  font-size: var(--article-deck-size);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.38;
  color: var(--article-ink-2);
  text-wrap: pretty;
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 0.7em;
  margin: 0;
  font-size: var(--article-meta-size);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--article-ink-3);
}

.article__meta a {
  color: inherit;
  transition: color 180ms ease;
}

.article__meta a:hover,
.article__meta a:focus-visible {
  color: var(--text);
}

.article__meta-sep {
  opacity: 0.55;
}

/* Figures ---------------------------------------------------------------- */

/* In-body figures step just outside the measure. */
.article__figure {
  width: calc(100% + var(--article-bleed) * 2);
  margin: 0 calc(var(--article-bleed) * -1) clamp(30px, 4vw, 44px);
}

/* The cover is a direct child of .article, so it runs the full page width and
   answers the title above it; its caption returns to the measure. */
.article__figure--cover {
  width: 100%;
  margin: 0 0 clamp(30px, 4vw, 44px);
}

.article__figure--cover .article__caption {
  width: var(--article-measure);
  margin-inline: auto;
}

.article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  /* Holds the layout and avoids a white flash before a large JPEG paints. */
  background: rgba(var(--text-rgb), 0.06);
}

/* Captions return to the measure so the text edge stays unbroken. */
.article__caption {
  margin: 0.85em var(--article-bleed) 0;
  font-size: var(--article-meta-size);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: var(--article-ink-3);
}

/* Body ------------------------------------------------------------------- */

.article__body > * + * {
  margin-top: 1.4em;
}

.article__body p,
.article__body li {
  margin: 0;
  font-size: var(--article-body-size);
  font-weight: 500;
  /* Inter's display tracking (-0.03em) tightens counters at reading sizes;
     long-form wants close to neutral. */
  letter-spacing: -0.012em;
  line-height: 1.62;
  text-wrap: pretty;
}

.article--constitution .article__body > p + p {
  margin-top: 1.4em;
}

.article__body h2,
.article__body h3 {
  scroll-margin-top: clamp(24px, 8vh, 72px);
  text-wrap: balance;
}

.article__body h2 {
  margin: clamp(56px, 6.5vw, 88px) 0 0;
  font-size: var(--article-h2-size);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

.article__body h3 {
  margin: clamp(36px, 4vw, 52px) 0 0;
  font-size: var(--article-h3-size);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.article__body h2 + *,
.article__body h3 + * {
  margin-top: 0.7em;
}

/* Section anchors: silent until the heading is hovered or the link focused. */
.article__anchor {
  display: inline-block;
  margin-left: 0.3em;
  color: var(--article-ink-3);
  opacity: 0;
  transition: opacity 160ms ease, color 160ms ease;
}

.article__body h2:hover .article__anchor,
.article__body h3:hover .article__anchor,
.article__anchor:focus-visible {
  opacity: 1;
}

.article__anchor:hover {
  color: var(--text);
}

.article__body ul,
.article__body ol {
  margin-left: 0;
  padding-left: 1.2em;
}

.article__body li + li {
  margin-top: 0.5em;
}

.article__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-skip-ink: auto;
  text-decoration-color: var(--article-underline);
  transition: text-decoration-color 180ms ease;
}

.article__body a:hover,
.article__body a:focus-visible {
  text-decoration-color: currentColor;
}

.article__body a.article__anchor {
  text-decoration: none;
}

.article__body strong {
  font-weight: 500;
  color: var(--text);
}

.article__body blockquote {
  --quote-indent: clamp(20px, var(--article-bleed), 48px);
  margin: clamp(36px, 4.5vw, 56px) 0;
  padding: 0 0 0 var(--quote-indent);
  border-left: 2px solid var(--article-quote-stripe);
}

.article__body blockquote p {
  font-style: normal;
}

.article__body blockquote > * + * {
  margin-top: 1.1em;
}

/* Above the mobile breakpoint the quote outdents so its text stays on the
   measure and only the rule sits in the margin. */
@media (min-width: 821px) {
  .article__body blockquote {
    width: calc(100% + var(--quote-indent));
    margin-left: calc(var(--quote-indent) * -1);
  }
}

/* Footer ----------------------------------------------------------------- */

.article__footer {
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top: 1px solid var(--article-rule);
  display: grid;
  justify-items: start;
  gap: clamp(18px, 2.4vw, 26px);
}

.article__author {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 16px);
}

.article__author-avatar {
  width: clamp(40px, 3.4vw, 48px);
  height: clamp(40px, 3.4vw, 48px);
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(var(--text-rgb), 0.06);
}

.article__byline {
  margin: 0;
  font-size: var(--article-body-size);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
}

.article__byline a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--article-underline);
  transition: text-decoration-color 180ms ease;
}

.article__byline a:hover,
.article__byline a:focus-visible {
  text-decoration-color: currentColor;
}

.article__byline-role {
  display: block;
  font-size: var(--article-meta-size);
  color: var(--article-ink-3);
}

.article__also {
  margin: 0;
  font-size: var(--article-meta-size);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5;
  color: var(--article-ink-3);
}

.article__also a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  text-decoration-color: var(--article-underline);
  transition: color 180ms ease, text-decoration-color 180ms ease;
}

.article__also a:hover,
.article__also a:focus-visible {
  color: var(--text);
  text-decoration-color: currentColor;
}

/* Breakpoints ------------------------------------------------------------ */

@media (max-width: 820px) {
  .article {
    --article-title-size: clamp(38px, 13vw, 56px);
    --article-deck-size: 17px;
    --article-h2-size: 23px;
    --article-h3-size: 19px;
    --article-body-size: 17px;
  }

  .topbar--article {
    gap: 12px;
  }

  .article__author-avatar {
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .article {
    animation: none;
  }

  .article__home-arrow,
  .reading-progress__bar {
    transition: none;
  }
}

/* Print ------------------------------------------------------------------ */

@media print {
  .topbar,
  .reading-progress,
  .article__home {
    display: none !important;
  }

  .article {
    width: 100%;
    margin: 0;
    padding: 0;
    animation: none;
    --article-title-size: 32pt;
    --article-ink-2: #333;
    --article-ink-3: #555;
  }

  .article__intro,
  .article__body,
  .article__footer,
  .article__figure {
    width: 100%;
    margin-inline: 0;
  }

  .article__title {
    margin: 0 0 16pt;
    text-align: left;
  }

  .article__figure {
    break-inside: avoid;
  }

  .article__body h2,
  .article__body h3 {
    break-after: avoid;
  }

  .article__body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
    word-break: break-all;
  }
}