/* Build-process article

   Sections: Reading layout / Article header / Article body / Editorial notes.
   Responsive overrides stay beside their component in cascade order. */
@import "./reset.css";
@import "./theme.css";

/* ==========================================================================
   Reading layout
   ========================================================================== */
.site-article .reading-column {
  max-width: 760px;
}

/* ==========================================================================
   Article header
   ========================================================================== */
.site-article .article-header {
  padding: var(--layout-section-padding) 0;
  background: var(--color-surface-brand);
  color: var(--color-text-brand);
}

.site-article .article-header h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-50);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  max-width: 650px;
  margin: 1.5rem 0 2rem;
}

.site-article .article-back,
.site-article .article-eyebrow,
.site-article .article-byline {
  font-family: var(--font-family-label);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-semibold);
}

.site-article .article-back {
  display: inline-block;
  margin-bottom: 5rem;
}

.site-article .article-eyebrow,
.site-article .article-byline {
  margin-left: 0;
  margin-right: 0;
}

.site-article .article-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.site-article .article-deck {
  font-family: var(--font-family-body);
  font-size: var(--font-size-24);
  line-height: var(--line-height-body);
  max-width: 620px;
}

.site-article .article-byline {
  margin-top: 2.5rem;
}

/* ==========================================================================
   Article body
   ========================================================================== */
.site-article .article-body {
  padding-top: var(--layout-section-padding);
  padding-bottom: var(--layout-section-padding);
}

.site-article p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-19);
  line-height: 1.65;
}

.site-article .article-intro {
  font-size: var(--font-size-24);
}

.site-article section {
  margin-top: 5rem;
}

.site-article h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  margin-bottom: 2rem;
}

.site-article p + p {
  margin-top: 1.5rem;
}

.site-article a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-article a:hover {
  text-decoration-thickness: 2px;
}

.site-article a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* ==========================================================================
   Editorial notes
   ========================================================================== */
.site-article .article-note {
  margin-top: 3rem;
  padding: 2.5rem;
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-subtle);
  border-radius: 0 var(--radius-14) var(--radius-14) 0;
}

.site-article .article-note h3 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  margin-bottom: 1rem;
}

@media only screen and (max-width: 700px) {
  .site-article .article-header {
    padding: var(--layout-section-padding-compact) 0;
  }

  .site-article .article-header h1 {
    font-size: var(--font-size-36);
  }

  .site-article .article-body {
    padding-top: var(--layout-section-padding-compact);
    padding-bottom: var(--layout-section-padding-compact);
  }

  .site-article .article-back {
    margin-bottom: 3.5rem;
  }

  .site-article .article-deck,
  .site-article .article-intro {
    font-size: var(--font-size-22);
  }

  .site-article h2 {
    font-size: var(--font-size-26);
  }

  .site-article section {
    margin-top: 4rem;
  }

  .site-article .article-note {
    padding: 2rem;
  }
}

/* Separate the long-form article from the shared contact section. */

/* dark-theme:start — generated by scripts/prepare-themes.js */
@media (prefers-color-scheme: dark) {
/* Authored once; generated into both system and explicit dark branches. */
:where(:root:not([data-theme])) .site-article .article-header {
  background: var(--color-surface-section);
  box-shadow: inset 0 -1px var(--color-border-section);
}

:where(:root:not([data-theme])) main.site-article {
  box-shadow: inset 0 -1px var(--color-border-section);
}
}

/* Authored once; generated into both system and explicit dark branches. */
:where(:root[data-theme="dark"]) .site-article .article-header {
  background: var(--color-surface-section);
  box-shadow: inset 0 -1px var(--color-border-section);
}

:where(:root[data-theme="dark"]) main.site-article {
  box-shadow: inset 0 -1px var(--color-border-section);
}
/* dark-theme:end */