/* INTO Consulting Brand System publication layer.
   Specializes context.css for the brand.weareinto.consulting site.
   No new visual primitives — uses INTO tokens only. */

/* Topbar additions — wordmark sized to read as the page anchor, weight-
   matched to nav text. Scoped to the site topbar so the existing context
   chrome (smaller micro-mark) is preserved. */

.spec-topbar[data-site-topbar] .spec-brand {
  gap: 0;
}

.spec-topbar[data-site-topbar] .spec-brand-wordmark {
  height: 1.5rem;
}

@media (max-width: 56rem) {
  .spec-topbar[data-site-topbar] .spec-brand-wordmark {
    height: 1.25rem;
  }
}

.site-primary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--into-space-6);
  align-items: center;
  margin-inline-start: auto;
  font-family: var(--into-font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
}

.site-primary-nav a {
  color: var(--into-text-secondary);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 1px solid transparent;
  transition: color var(--into-motion-quick) var(--into-ease-standard),
    border-color var(--into-motion-quick) var(--into-ease-standard);
}

.site-primary-nav a:hover,
.site-primary-nav a[aria-current="page"] {
  color: var(--into-accent);
  border-bottom-color: var(--into-accent);
}

@media (max-width: 56rem) {
  .site-primary-nav {
    width: 100%;
    margin-inline-start: 0;
    order: 3;
    padding-top: var(--into-space-3);
    border-top: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
  }
}

/* Breadcrumbs */

.site-breadcrumbs {
  max-width: var(--context-page-max);
  margin: 0 auto;
  padding: var(--into-space-6) var(--context-page-pad) 0;
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
}

.site-breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ch;
  padding: 0;
  margin: 0;
}

.site-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
}

.site-breadcrumbs li + li::before {
  content: "/";
  color: var(--into-text-faint);
}

.site-breadcrumbs a {
  color: var(--into-text-muted);
  text-decoration: none;
}

.site-breadcrumbs a:hover {
  color: var(--into-accent);
}

.site-breadcrumbs [aria-current="page"] {
  color: var(--into-text-primary);
}

/* Main column */

.site-main {
  max-width: var(--context-page-max);
  margin: 0 auto;
  padding: var(--into-space-9) var(--context-page-pad) var(--context-spec-rhythm);
}

.site-article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--into-space-8);
}

@media (min-width: 64rem) {
  .site-article {
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--into-space-11);
  }
}

.site-article-header {
  font-family: var(--into-font-sans);
  border-bottom: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
  padding-bottom: var(--into-space-8);
  margin-bottom: var(--into-space-9);
  grid-column: 1 / -1;
}

.site-article-kicker {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  margin: 0 0 var(--into-space-4);
}

.site-article-title {
  font-family: var(--into-font-serif);
  font-size: clamp(2.5rem, 4.5vw, 3.25rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.06;
  margin: 0 0 var(--into-space-5);
  max-width: 22ch;
}

.site-article-summary {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 1.125rem;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--into-text-secondary);
  max-width: 50ch;
  margin: 0;
}

/* Optional left rail (table of contents on wide screens) */

.site-article-rail {
  display: none;
}

@media (min-width: 64rem) {
  .site-article-rail {
    display: block;
    position: sticky;
    top: var(--into-space-9);
    align-self: start;
    font-family: var(--into-font-sans);
    font-weight: 400;
    font-size: 0.875rem;
  }

  .site-article-rail h2 {
    font-family: var(--into-font-mono);
    font-weight: 400;
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--into-text-muted);
    margin: 0 0 var(--into-space-3);
  }

  .site-article-rail ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--into-space-2);
  }

  .site-article-rail a {
    color: var(--into-text-secondary);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--into-space-3);
    display: block;
  }

  .site-article-rail a:hover {
    color: var(--into-accent);
    border-left-color: var(--into-accent);
  }
}

/* Rendered markdown body */

/* Body and prose: Lexend 300 per typography-spacing-system.md.
   Body floor: 1rem. Measure: 35-56ch. */
.site-article-body {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--into-text-primary);
  max-width: 56ch;
  min-width: 0;
}

.site-article-body > * + * {
  margin-top: 1rem;
}

/* Section title (H2 in MD): Newsreader 400, 2.75-4rem ceiling.
   In-article H2s use the low end and a clear before-gap. */
.site-article-body h2 {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: 0;
  line-height: 1.1;
  color: var(--into-text-primary);
  margin-top: var(--into-space-13);
  margin-bottom: var(--into-space-5);
  scroll-margin-top: var(--into-space-9);
  max-width: 28ch;
}

/* Subheading / card title: Newsreader 400, 1.35-1.65rem, 1.12-1.2 line-height. */
.site-article-body h3 {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 1.18;
  color: var(--into-text-primary);
  margin-top: var(--into-space-9);
  margin-bottom: var(--into-space-4);
  scroll-margin-top: var(--into-space-9);
  max-width: 32ch;
}

/* H4 is a granular subhead; still Newsreader 400 per subheading rule. */
.site-article-body h4 {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--into-text-primary);
  margin-top: var(--into-space-8);
  margin-bottom: var(--into-space-3);
}

.site-article-body p {
  margin: 0;
}

.site-article-body a {
  color: var(--into-accent);
  text-decoration-color: color-mix(in srgb, var(--into-accent) 38%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.site-article-body a:hover {
  text-decoration-color: var(--into-accent);
}

.site-article-body ul,
.site-article-body ol {
  padding-inline-start: 1.25rem;
  margin: 0;
}

.site-article-body li + li {
  margin-top: var(--into-space-2);
}

.site-article-body li::marker {
  color: var(--into-text-faint);
}

.site-article-body code {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.875em;
  letter-spacing: 0;
  padding: 0.1em 0.4em;
  background: var(--into-surface-raised);
  border-radius: var(--into-radius-small);
}

.site-article-body pre {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  line-height: 1.6;
  letter-spacing: 0;
  padding: var(--into-space-5);
  background: var(--into-surface-deep-editorial);
  color: var(--into-text-inverse);
  border-radius: var(--into-radius-card);
  overflow-x: auto;
}

.site-article-body pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}

.site-article-body blockquote {
  margin: 0;
  padding-left: var(--into-space-5);
  border-left: 2px solid var(--into-accent);
  color: var(--into-text-secondary);
  font-style: italic;
}

.site-article-body hr {
  border: none;
  border-top: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
  margin: var(--into-space-11) 0;
}

/* Tables follow the 0.875rem absolute / 1rem preferred floor per typography rules. */
.site-article-body table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  letter-spacing: 0;
}

/* Narrow viewports — let dense tables scroll horizontally rather than
   compress cells below the legibility floor. */
@media (max-width: 48rem) {
  .site-article-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.site-article-body th,
.site-article-body td {
  text-align: left;
  padding: var(--into-space-3) var(--into-space-4);
  border-bottom: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
  vertical-align: top;
}

.site-article-body th {
  font-family: var(--into-font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
}

/* Index / page-list patterns */

.site-page-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--into-space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
}

.site-page-list-item {
  border-top: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
  padding-top: var(--into-space-5);
}

.site-page-list-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.site-page-list-kicker {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  margin: 0 0 var(--into-space-2);
}

/* Card subheading: Newsreader 400, 1.35-1.65rem. */
.site-page-list-title {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 1.18;
  color: var(--into-text-primary);
  margin: 0 0 var(--into-space-3);
}

.site-page-list-description {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--into-text-secondary);
  margin: 0;
  max-width: 50ch;
}

.site-page-list-item a:hover .site-page-list-title {
  color: var(--into-accent);
}

/* Landing page hero */

.site-landing-hero {
  display: grid;
  gap: var(--into-space-8);
  padding-block: var(--into-space-9) var(--context-spec-rhythm);
  max-width: 62rem;
}

.site-landing-eyebrow {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  margin: 0;
}

/* Cover title: Newsreader 400, 3.25-4.5rem, 1.0-1.06 line-height. */
.site-landing-title {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: clamp(3.25rem, 6vw, 4.5rem);
  letter-spacing: 0;
  line-height: 1.03;
  color: var(--into-text-primary);
  margin: 0;
  max-width: 18ch;
}

/* Lead: Lexend 300, 1.0625-1.25rem, max measure 50ch. */
.site-landing-lead {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 1.25rem;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--into-text-secondary);
  max-width: 50ch;
  margin: 0;
}

.site-landing-areas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--into-space-6);
  padding-block: var(--into-space-9);
  border-top: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
}

.site-landing-area-title {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  margin: 0 0 var(--into-space-3);
}

/* Card subheading: Newsreader 400, 1.35-1.65rem. */
.site-landing-area-link {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0;
  line-height: 1.18;
  text-decoration: none;
  color: var(--into-text-primary);
  display: block;
  margin-bottom: var(--into-space-2);
  max-width: 22ch;
}

.site-landing-area-link:hover {
  color: var(--into-accent);
}

.site-landing-area-desc {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--into-text-secondary);
  margin: 0;
  max-width: 42ch;
}

/* Footer */

.site-footer {
  border-top: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.08));
  background: var(--into-surface-raised);
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
}

.site-footer-inner {
  max-width: var(--context-page-max);
  margin: 0 auto;
  padding: var(--into-space-7) var(--context-page-pad);
  display: flex;
  flex-wrap: wrap;
  gap: var(--into-space-5);
  justify-content: space-between;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: var(--into-text-secondary);
  text-decoration-color: color-mix(in srgb, var(--into-text-secondary) 32%, transparent);
}

.site-footer code {
  font-family: var(--into-font-mono);
  font-size: inherit;
  color: var(--into-accent);
}

/* Search trigger in the topbar */

.site-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--into-space-2);
  font-family: var(--into-font-sans);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  background: var(--into-surface-raised);
  border: 1px solid var(--into-line-soft);
  border-radius: var(--into-radius-card);
  padding: 0.3125rem var(--into-space-3);
  cursor: pointer;
  transition: color var(--into-motion-quick) var(--into-ease-standard),
    border-color var(--into-motion-quick) var(--into-ease-standard);
}

.site-search-trigger:hover,
.site-search-trigger:focus-visible {
  color: var(--into-text-primary);
  border-color: var(--into-accent);
  outline: none;
}

.site-search-trigger svg {
  flex-shrink: 0;
  color: var(--into-text-muted);
}

.site-search-trigger kbd {
  font-family: var(--into-font-mono);
  font-size: 0.6875rem;
  color: var(--into-text-muted);
  background: var(--into-surface-page);
  border: 1px solid var(--into-line-soft);
  border-radius: 0.1875rem;
  padding: 0 0.3125rem;
  min-width: 1.25rem;
  text-align: center;
}

@media (max-width: 48rem) {
  .site-search-trigger span,
  .site-search-trigger kbd {
    display: none;
  }
}

/* Search shell */

.site-search-shell {
  margin-top: var(--into-space-7);
}

.site-search-dev-note {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
  background: var(--into-accent-soft);
  border-left: 2px solid var(--into-accent);
  padding: var(--into-space-4) var(--into-space-5);
  border-radius: var(--into-radius-small);
  margin: 0 0 var(--into-space-7);
}

.site-search-dev-note code {
  font-family: var(--into-font-mono);
  color: var(--into-accent);
}

.site-search-empty {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.9375rem;
  color: var(--into-text-secondary);
  padding: var(--into-space-9) var(--into-space-5);
  text-align: center;
  border: 1px dashed var(--into-line-soft);
  border-radius: var(--into-radius-panel);
}

/* Pagefind UI alignment with INTO tokens (used by /search Default UI). */
:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: var(--into-accent);
  --pagefind-ui-text: var(--into-text-primary);
  --pagefind-ui-background: var(--into-surface-page);
  --pagefind-ui-border: var(--into-line-soft);
  --pagefind-ui-tag: var(--into-surface-raised);
  --pagefind-ui-border-width: 1px;
  --pagefind-ui-border-radius: var(--into-radius-card);
  --pagefind-ui-font: var(--into-font-sans);
}

/* Search modal — uses the pagefind.js API directly with INTO styling. */

.site-search-modal {
  border: none;
  padding: 0;
  background: transparent;
  color: var(--into-text-primary);
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(80vh, 36rem);
  margin: 6vh auto 0;
  border-radius: var(--into-radius-panel);
  box-shadow: var(--into-shadow-command);
}

.site-search-modal::backdrop {
  background: var(--into-scrim-modal);
  backdrop-filter: blur(0.25rem);
}

.site-search-modal[open] {
  display: flex;
}

.site-search-modal-form {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--into-surface-page);
  border: 1px solid var(--into-line-soft);
  border-radius: var(--into-radius-panel);
  overflow: hidden;
  max-height: inherit;
}

.site-search-modal-header {
  display: flex;
  align-items: center;
  gap: var(--into-space-3);
  padding: var(--into-space-5) var(--into-space-6);
  border-bottom: 1px solid var(--into-line-soft);
}

.site-search-modal-icon {
  flex-shrink: 0;
  color: var(--into-text-muted);
}

.site-search-modal-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--into-font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--into-text-primary);
  letter-spacing: 0;
  padding: 0;
  min-width: 0;
}

.site-search-modal-input::placeholder {
  color: var(--into-text-faint);
}

.site-search-modal-close {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--into-line-soft);
  border-radius: var(--into-radius-small);
  color: var(--into-text-muted);
  font-family: var(--into-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}

.site-search-modal-close:hover {
  border-color: var(--into-accent);
  color: var(--into-accent);
}

.site-search-modal-close kbd {
  font-family: inherit;
  font-size: inherit;
}

.site-search-modal-status {
  font-family: var(--into-font-mono);
  font-size: 0.75rem;
  color: var(--into-text-muted);
  padding: var(--into-space-3) var(--into-space-6);
  border-bottom: 1px solid var(--into-line-soft);
  background: var(--into-surface-raised);
}

.site-search-modal-results {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--into-space-2) 0;
  max-height: 26rem;
}

.site-search-result {
  display: block;
  text-decoration: none;
  color: inherit;
  padding: var(--into-space-4) var(--into-space-6);
  border-bottom: 1px solid var(--into-border-hairline, rgba(15, 21, 24, 0.06));
  cursor: pointer;
}

.site-search-result:last-child {
  border-bottom: none;
}

.site-search-result.is-active,
.site-search-result:hover {
  background: var(--into-accent-soft);
}

.site-search-result-title {
  font-family: var(--into-font-serif);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.2;
  color: var(--into-text-primary);
  margin: 0 0 0.25rem;
}

.site-search-result-url {
  font-family: var(--into-font-mono);
  font-weight: 400;
  font-size: 0.6875rem;
  color: var(--into-accent);
  margin: 0 0 var(--into-space-2);
  letter-spacing: 0;
}

.site-search-result-excerpt {
  font-family: var(--into-font-sans);
  font-weight: 300;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--into-text-secondary);
  margin: 0;
  max-width: 56ch;
}

.site-search-result-excerpt :global(mark),
.site-search-result-excerpt mark {
  background: var(--into-state-warning-soft);
  color: var(--into-state-warning-ink);
  padding: 0 0.15em;
  border-radius: 0.125rem;
}

.site-search-modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--into-space-5);
  align-items: center;
  padding: var(--into-space-3) var(--into-space-6);
  border-top: 1px solid var(--into-line-soft);
  background: var(--into-surface-raised);
  font-family: var(--into-font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0;
  color: var(--into-text-muted);
}

.site-search-modal-footer kbd {
  font-family: inherit;
  font-size: inherit;
  color: var(--into-text-secondary);
  background: var(--into-surface-page);
  border: 1px solid var(--into-line-soft);
  border-radius: 0.1875rem;
  padding: 0 0.3rem;
  margin-inline-end: 0.25rem;
}

.site-search-modal-footer a {
  margin-inline-start: auto;
  color: var(--into-accent);
  text-decoration: none;
}

.site-search-modal-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--into-accent);
  text-underline-offset: 0.2em;
}

@media (max-width: 48rem) {
  .site-search-modal {
    width: calc(100vw - 1rem);
    margin: 2vh auto 0;
    max-height: 96vh;
  }
  .site-search-modal-header { padding: var(--into-space-4); }
  .site-search-result { padding: var(--into-space-3) var(--into-space-4); }
  .site-search-modal-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--into-space-2);
  }
  .site-search-modal-footer a { margin-inline-start: 0; }
}