/* Shared site chrome: header, nav and footer on every page, articles included.
 * Literal colours so it works on pages that do not load tokens.css (the articles).
 * Paper ground (D060); the content keeps a 1600px edge at any width. */

.sc-header,
footer.sc-footer {
  --sc-pad:clamp(1.25rem,5.2vw,5rem);
  padding-inline:max(var(--sc-pad),calc((100% - 1600px) / 2 + var(--sc-pad)));
  background:#f5f7f8;
  color:#171b1d;
  font-family:Inter,Arial,sans-serif;
}
.sc-header {
  min-height:92px;
  padding-block:1.4rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  border-bottom:1px solid #d4dadd;
  -webkit-font-smoothing:antialiased;
}
.sc-wordmark {
  /* --wm is the wordmark's type size; the lockup image is 1.0816 of it tall (D061: the
   * chord ring's disc runs one unit wider than the octagon it replaced). */
  --wm:clamp(1.55rem,2.1vw,2rem);
  display:block;
  line-height:0;
}
.sc-wordmark img {
  display:block;
  height:calc(var(--wm) * 1.0816);
  width:auto;
}
/* The homepage header sits over the dusk photograph. */
.sc-header[data-over] {
  position:absolute;
  inset:0 0 auto;
  z-index:2;
  background:transparent;
  color:#eef1f2;
  border-bottom-color:rgba(238,241,242,.16);
}
.sc-header[data-over] .sc-nav a[aria-current="page"],
.sc-header[data-over] .sc-nav a:last-child {
  border-bottom-color:#eef1f2;
}
.sc-nav {
  display:flex;
  gap:2rem;
  font-size:.75rem;
  line-height:1.65;
}
.sc-nav a {
  white-space:nowrap;
  color:inherit;
  text-decoration:none;
  text-underline-offset:5px;
}
.sc-nav a:hover {
  text-decoration:underline;
}
.sc-nav a[aria-current="page"],
.sc-nav a:last-child {
  border-bottom:1px solid #171b1d;
}

footer.sc-footer {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.8rem 2rem;
  padding-block:1.5rem 2rem;
  border-top:1px solid #d4dadd;
  color:#687984;
  font-size:.75rem;
  line-height:1.6;
}
.sc-footer-links {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem 1.5rem;
}
.sc-footer a,
.sc-footer .attribution-settings {
  color:inherit;
  font-size:inherit;
  text-underline-offset:.3em;
}
.sc-footer .attribution-settings:hover,
.sc-footer .attribution-settings:focus-visible {
  color:#873e53;
}

@media(max-width:1050px) {
  .sc-nav {
    gap:1.2rem;
  }
}
@media(max-width:760px) {
  .sc-header {
    min-height:auto;
    flex-wrap:wrap;
    gap:1.2rem;
  }
  .sc-nav {
    width:100%;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:.4rem .7rem;
  }
  footer.sc-footer {
    flex-direction:column;
    align-items:flex-start;
  }
}
@media(max-width:420px) {
  .sc-wordmark {
    --wm:1.5rem;
  }
  .sc-nav {
    justify-content:flex-start;
    gap:.4rem 1.1rem;
    font-size:.72rem;
  }
}

/* Realization signup: the block on Insights and at the end of each article, and the form
 * on /realization/. Literal colours, as above, so it works on the articles too. The form
 * posts to Buttondown; no script needed. */
.sc-signup {
  --sc-pad:clamp(1.25rem,5.2vw,5rem);
  padding:clamp(48px,6vw,80px) max(var(--sc-pad),calc((100% - 1600px) / 2 + var(--sc-pad)));
  background:#fff;
  border-block:1px solid #d4dadd;
  color:#171b1d;
  font-family:Inter,Arial,sans-serif;
}
.sc-signup-inner {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:32px 64px;
  align-items:end;
  max-width:1200px;
}
.sc-signup-eyebrow {
  margin:0 0 14px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#46535a;
}
.sc-signup-name {
  margin:0;
  font:400 clamp(30px,3vw,42px)/1.1 SourceSerif,Georgia,serif;
}
.sc-signup-name::before { content:""; display:block; width:56px; border-top:2px solid #aa556b; margin:0 0 18px; }
.sc-signup-name a { color:inherit; text-decoration:none; }
.sc-signup-name a:hover { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em; }
.sc-signup-desc {
  margin:16px 0 0;
  max-width:52ch;
  font-size:16px;
  line-height:1.6;
  color:#46535a;
}
.sc-signup-form { display:grid; gap:8px; max-width:520px; margin:0; }
.sc-signup-label { font-size:13px; font-weight:600; color:#171b1d; }
.sc-signup-row { display:flex; gap:8px; }
.sc-signup-input {
  flex:1;
  min-width:0;
  padding:11px 14px;
  font:400 15px Inter,Arial,sans-serif;
  color:#171b1d;
  background:#fff;
  border:1px solid #8a969d;
  border-radius:0;
}
.sc-signup-input:focus-visible { outline:3px solid #873e53; outline-offset:2px; }
.sc-signup-button {
  flex:none;
  padding:12px 20px;
  font:600 14px Inter,Arial,sans-serif;
  color:#fff;
  background:#873e53;
  border:0;
  border-radius:0;
  cursor:pointer;
}
.sc-signup-button:hover { background:#6f3243; }
.sc-signup-button:focus-visible { outline:3px solid #873e53; outline-offset:3px; }
.sc-signup-note { margin:4px 0 0; font-size:13px; line-height:1.5; color:#46535a; }
.sc-signup-note a { color:#171b1d; text-underline-offset:3px; }
@media(max-width:860px) {
  .sc-signup-inner { grid-template-columns:minmax(0,1fr); align-items:start; }
}
@media(max-width:420px) {
  .sc-signup-row { flex-direction:column; }
  .sc-signup-button { align-self:flex-start; }
}