.editorial-main {
  padding: 62px 0 90px;
}
.archive-header {
  padding: 20px 0 44px;
  max-width: 850px;
}
.archive-header h1,
.article-header h1,
.policy-copy h1 {
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 500;
  letter-spacing: -3px;
  line-height: 1.04;
  margin: 24px 0;
}
.archive-header > p {
  max-width: 630px;
  font-size: 18px;
  color: var(--muted);
  line-height: 1.7;
}
.article-list {
  border-top: 1px solid var(--line);
}
.article-list > article {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  padding: 32px 0;
  border-bottom: 1px solid var(--line);
}
.list-date {
  font:
    11px ui-monospace,
    monospace;
  color: var(--muted);
  padding-top: 8px;
}
.list-date span {
  display: block;
  margin-top: 10px;
  color: var(--acid);
}
.article-list h2 {
  font-size: clamp(24px, 2.8vw, 35px);
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.2;
  margin: 0 0 12px;
  max-width: 790px;
}
.article-list h2 a {
  text-decoration: none;
}
.article-list h2 a span {
  color: var(--acid);
}
.article-list p {
  font-size: 15px;
  color: var(--muted);
  max-width: 650px;
  margin: 0;
}
.breadcrumbs {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 9px;
}
.article-header {
  max-width: 1030px;
  padding: 35px 0 46px;
}
.article-header h1 {
  font-size: clamp(40px, 5vw, 67px);
  line-height: 1.07;
}
.article-summary {
  font-size: 21px;
  line-height: 1.65;
  color: var(--prose);
  max-width: 800px;
}
.article-meta {
  font:
    11px/1.8 ui-monospace,
    monospace;
  color: var(--muted);
  margin-top: 24px;
}
.disclosure {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 770px;
  border-left: 2px solid var(--panel-line);
  padding-left: 14px;
  margin-top: 24px;
}
.article-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 760px);
  gap: 75px;
  border-top: 1px solid var(--line);
  padding-top: 38px;
}
.article-toc {
  align-self: start;
  position: sticky;
  top: 28px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.65;
}
.article-toc h2 {
  font:
    11px ui-monospace,
    monospace;
  letter-spacing: 1px;
  color: var(--text);
  text-transform: uppercase;
  margin: 0 0 20px;
}
.article-toc ol {
  padding-left: 17px;
  margin-bottom: 27px;
}
.article-toc li {
  padding: 0 0 13px 3px;
}
.article-toc a {
  text-decoration: none;
}
.article-toc > a {
  font-size: 11px;
  color: var(--acid);
  display: inline-block;
  padding: 10px 0;
}
.article-copy {
  font-size: 17px;
  line-height: 1.85;
  color: var(--prose);
}
.article-copy h2,
.policy-copy h2 {
  font-size: 29px;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 39px 0 20px;
}
.article-copy section {
  scroll-margin-top: 35px;
}
.article-copy p {
  margin: 0 0 23px;
}
.article-copy ul,
.article-copy ol {
  padding-left: 22px;
}
.article-copy li {
  padding-left: 5px;
  margin-bottom: 14px;
}
.takeaways {
  padding: 25px 28px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  border-radius: 16px;
  margin: 0 0 40px;
}
.takeaways h2 {
  font-size: 16px;
  margin: 0 0 15px;
  color: var(--acid);
}
.takeaways ul {
  margin-bottom: 0;
  font-size: 15px;
}
.takeaways li:last-child {
  margin-bottom: 0;
}
.article-copy .section-citations {
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
}
.article-sources {
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.article-sources p,
.article-sources li,
.editorial-note {
  font-size: 13px;
  line-height: 1.75;
}
.editorial-note {
  padding-top: 15px;
  color: var(--muted);
}
.article-sources a {
  overflow-wrap: anywhere;
}
.newsletter-signup {
  max-width: 800px;
  padding: 35px;
  border: 1px solid var(--panel-line);
  background: var(--panel);
  border-radius: 16px;
  margin-bottom: 60px;
}
.newsletter-signup h2 {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 18px 0;
}
.newsletter-signup > p {
  font-size: 15px;
  color: var(--prose);
  line-height: 1.75;
  max-width: 610px;
  margin-bottom: 27px;
}
.newsletter-signup form {
  max-width: 550px;
}
.archive-label {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 25px;
}
.empty-archive {
  font-size: 15px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 25px;
}
.policy-copy {
  max-width: 800px;
  padding: 20px 0;
}
.policy-copy p,
.policy-copy li {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}
.policy-copy li {
  margin-bottom: 14px;
}
.policy-copy a {
  overflow-wrap: anywhere;
}
.home-editorial {
  padding-top: 20px;
  padding-bottom: 80px;
}
.home-editorial .article-list h2 {
  font-size: 29px;
}
.footer-links {
  flex-wrap: wrap;
}
.footer-top {
  align-items: flex-start;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.header nav {
  gap: 23px;
}
@media (max-width: 1000px) {
  .article-layout {
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 35px;
  }
  .article-copy {
    font-size: 16px;
  }
  .header nav {
    gap: 17px;
  }
  .footer-top {
    flex-direction: column;
    gap: 15px;
  }
}
@media (max-width: 700px) {
  .editorial-main {
    padding: 39px 0 60px;
  }
  .archive-header {
    padding: 12px 0 29px;
  }
  .archive-header h1,
  .article-header h1,
  .policy-copy h1 {
    font-size: 42px;
    letter-spacing: -1.9px;
    line-height: 1.06;
  }
  .archive-header > p {
    font-size: 16px;
  }
  .article-list > article {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 27px 0;
  }
  .list-date {
    display: flex;
    gap: 18px;
    padding-top: 0;
  }
  .list-date span {
    margin-top: 0;
  }
  .article-list h2,
  .home-editorial .article-list h2 {
    font-size: 27px;
    letter-spacing: -0.8px;
  }
  .article-list p {
    font-size: 14px;
  }
  .article-header {
    padding: 24px 0 30px;
  }
  .article-summary {
    font-size: 18px;
  }
  .article-meta {
    font-size: 10px;
  }
  .disclosure {
    font-size: 11px;
  }
  .article-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 28px;
  }
  .article-toc {
    position: static;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
  }
  .article-toc ol {
    margin-bottom: 12px;
  }
  .article-toc li {
    padding-bottom: 9px;
  }
  .article-copy {
    font-size: 16px;
    line-height: 1.85;
  }
  .article-copy h2,
  .policy-copy h2 {
    font-size: 26px;
    letter-spacing: -0.7px;
  }
  .takeaways {
    padding: 23px 20px;
  }
  .takeaways h2 {
    font-size: 16px;
  }
  .takeaways ul {
    font-size: 14px;
  }
  .newsletter-signup {
    padding: 26px 21px;
    margin-bottom: 40px;
  }
  .newsletter-signup h2 {
    font-size: 30px;
  }
  .newsletter-signup > p {
    font-size: 14px;
  }
  .policy-copy p,
  .policy-copy li {
    font-size: 15px;
  }
  .home-editorial {
    padding-bottom: 60px;
  }
  .header nav {
    gap: 0;
  }
  .footer-links {
    gap: 10px 20px;
  }
}

/* Appearance for every page that is not the home page.

   These rules live here, not in styles.css, because editorial.css is loaded
   by exactly the subpages and never by the home page. The home page keeps its
   own palette in studio.css and cannot be reached from this file, so no
   scoping selector is needed and the home page cannot regress.

   Every declaration names its dark value too, so a dark subpage renders
   exactly as it did before. A browser without light-dark() keeps the dark
   palette from the styles.css :root rather than breaking. */
:root {
  color-scheme: light dark;
  --bg: light-dark(#f5f6f4, #101114);
  --panel: light-dark(#fcfdfb, #202127);
  --panel-line: light-dark(#2b351923, #383b45);
  --text: light-dark(#131510, #f4f5f8);
  --prose: light-dark(#131510, #d8dae2);
  --muted: light-dark(#60665a, #adb1be);
  --line: light-dark(#2b351923, #35373f);
  /* Acid green is unreadable as text on paper, so on a light subpage --acid
     carries the same accent-text value studio.css uses for the light home
     page. The brand fills below name acid directly so they stay acid. */
  --acid: light-dark(#4a5a00, #ccff00);
  --ink: light-dark(#171d04, #17181c);
}
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}
/* Brand fills stay acid green in both themes and name it directly, exactly as
   studio.css does for the home page. :where() keeps the original specificity
   so .button:hover and .skip:focus still win. */
:where(:root) :is(.button, .skip),
:where(:root) .cookie-actions .accept {
  background: #ccff00;
  border-color: #ccff00;
  color: #171d04;
}
::selection {
  background: #ccff00;
  color: #171d04;
}
/* Controls need a boundary of their own once the page is paper: --muted
   clears 3:1 against the light background, where --line does not. */
:where(:root) :is(input[type="email"], input[type="text"], textarea) {
  background: light-dark(#fcfdfb, transparent);
  border-color: light-dark(#60665a, #757b8b);
}
:where(:root) :is(input, textarea)::placeholder {
  color: light-dark(#60665a, #9297a4);
}
:where(:root) .header nav .nav-cta,
:where(:root) .cookie-actions button {
  border-color: light-dark(#60665a, #757b8b);
}
:where(:root) .cookie-panel {
  background: var(--panel);
  border-color: light-dark(#60665a, #63666f);
  box-shadow: 0 12px 40px light-dark(#28381718, #0006);
}
:where(:root) .form-status[data-state="error"] {
  color: light-dark(#b3261e, #ff929f);
}
/* content: url() cannot take light-dark(), so the lockup swap is stated twice. */
@media (prefers-color-scheme: light) {
  :where(html:not([data-theme="dark"])) .brand img {
    content: url("/assets/brand-lockup-light.svg");
  }
}
:where(html[data-theme="light"]) .brand img {
  content: url("/assets/brand-lockup-light.svg");
}

/* See the touch-target note in workspace.css. The footer links already stand
   44px tall; the shortest of them are under the 24px minimum across, so they
   gain width only. The error page offers its onward links as a list, where a
   full row is the natural target. */
@media (pointer: coarse) {
  .footer-links a {
    min-width: 44px;
    justify-content: center;
  }
  .document ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Public directories: plugins and bots. A row states what the thing is and how
   far along it is, because everything here is still being built. Identity
   colour matches the colour the bot or connection has in the product. */
/* The dot beside a name is a mark, not text: it carries the colour the bot or
   connection actually has in the product, in both appearances. Text-safe
   variants are separate, and nothing here is the only signal for anything. */
:root {
  --id-acid: #ccff00;
  --id-pink: #ff6ccb;
  --id-cyan: #53e5ff;
  --id-lilac: #b694ff;
  --id-tangerine: #ffab4d;
}
/* An inline style attribute would be dropped by `style-src 'self'`. */
[data-id="acid"] {
  --id: var(--id-acid);
}
[data-id="pink"] {
  --id: var(--id-pink);
}
[data-id="cyan"] {
  --id: var(--id-cyan);
}
[data-id="lilac"] {
  --id: var(--id-lilac);
}
[data-id="tangerine"] {
  --id: var(--id-tangerine);
}
.directory {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.directory > li {
  display: grid;
  gap: 8px 24px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}
.directory > li:last-child {
  border-bottom: 1px solid var(--line);
}
.directory h3 {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.directory h3::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--id, var(--muted));
  flex: none;
}
.directory p {
  grid-column: 1;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 64ch;
}
.directory .needs {
  grid-column: 1;
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.directory .needs b {
  font-weight: 600;
  color: var(--text);
}
.state-tag {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}
.directory-note {
  margin-top: 32px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}
.shape-row {
  display: block;
  width: 100%;
  height: auto;
  margin: 32px 0 8px;
  border-radius: 18px;
  border: 1px solid var(--line);
}
.shape-row[data-scheme="light"] {
  display: none;
}
html[data-theme="light"] .shape-row[data-scheme="dark"] {
  display: none;
}
html[data-theme="light"] .shape-row[data-scheme="light"] {
  display: block;
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .shape-row[data-scheme="dark"] {
    display: none;
  }
  html:not([data-theme]) .shape-row[data-scheme="light"] {
    display: block;
  }
}
.suggest-fields {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 680px) {
  .suggest-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}