/*
Theme Name: HTIO
Theme URI: https://hathanhio.com
Description: Hà Thanh I/O visual system and block-theme child of Twenty Twenty-Five.
Author: Hà Thanh I/O
Template: twentytwentyfive
Version: 1.1.0
Text Domain: htio
*/

html {
  scroll-behavior: smooth;
}

body {
  background: var(--htio-paper);
  color: var(--htio-ink);
}

:where(*, *::before, *::after) {
  box-sizing: border-box;
}

::selection {
  background: var(--htio-signal);
  color: var(--htio-ink);
}

.htio-skip-link {
  background: var(--htio-ink);
  color: var(--htio-paper);
  font-weight: 800;
  left: 1rem;
  padding: .75rem 1rem;
  position: fixed;
  top: 0;
  transform: translateY(-140%);
  transition: transform 120ms ease;
  z-index: 1000;
}

.htio-skip-link:focus {
  transform: translateY(1rem);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--htio-focus);
  outline-offset: 3px;
}

:where(a) {
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}

:where(button, input, select, textarea) {
  font: inherit;
}

.htio-main {
  margin: 0;
}

.htio-section.has-standard-spacing {
  padding-block: clamp(4rem, 8vw, 8rem);
}

.htio-site-header {
  background: var(--htio-paper);
  border-bottom: 1px solid var(--htio-trace);
  position: sticky;
  top: 0;
  z-index: 50;
}

.htio-brand a {
  color: var(--htio-ink);
  font-family: "Phudu", sans-serif;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1;
  text-decoration: none;
}

.htio-nav .wp-block-navigation-item__content {
  color: var(--htio-ink);
  font-size: .8rem;
  font-weight: 700;
  position: relative;
  text-decoration: none;
}

.htio-nav .wp-block-navigation-item__content::after {
  background: var(--htio-action);
  bottom: -5px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--wp--custom--motion--fast) ease;
  width: 100%;
}

.htio-nav .wp-block-navigation-item__content:hover::after,
.htio-nav .wp-block-navigation-item__content:focus-visible::after,
.htio-nav .current-menu-item > .wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

.htio-nav-desktop .wp-block-navigation__submenu-container {
  background: var(--htio-paper) !important;
  border: 1px solid var(--htio-trace) !important;
  border-radius: var(--htio-radius-control);
  box-shadow: none !important;
  min-width: 18rem !important;
  padding: var(--wp--preset--spacing--xs) !important;
}

.htio-nav-desktop .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: .65rem .75rem;
}

.htio-nav-desktop .htio-nav-separator {
  border-top: 1px solid var(--htio-trace);
  margin-top: var(--wp--preset--spacing--xs);
  padding-top: var(--wp--preset--spacing--xs);
}

.htio-header-utility-link a:hover,
.htio-header-utility-link a:focus-visible {
  color: var(--htio-action);
  text-decoration: underline;
}

.htio-nav-mobile .wp-block-navigation__responsive-container-open,
.htio-nav-mobile .wp-block-navigation__responsive-container-close {
  align-items: center;
  color: var(--htio-ink);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  width: 44px;
}

.htio-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
  background: var(--htio-paper) !important;
  color: var(--htio-ink) !important;
  padding: var(--wp--preset--spacing--lg);
}

.htio-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  align-items: flex-start;
  padding-top: var(--wp--preset--spacing--xxl);
}

.htio-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm);
}

.htio-nav-mobile .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.25rem;
  padding-block: .35rem;
}

.wp-block-button.is-style-htio-cta .wp-block-button__link,
.wp-block-button.htio-button .wp-block-button__link {
  transition:
    box-shadow var(--wp--custom--motion--fast) ease,
    transform var(--wp--custom--motion--fast) ease;
}

.wp-block-button.is-style-htio-cta .wp-block-button__link:hover,
.wp-block-button.htio-button .wp-block-button__link:hover {
  box-shadow: 6px 6px 0 var(--htio-ink);
  transform: translate(-2px, -2px);
}

.wp-block-button.is-style-htio-cta .wp-block-button__link:active,
.wp-block-button.htio-button .wp-block-button__link:active {
  box-shadow: 2px 2px 0 var(--htio-ink);
  transform: translate(1px, 1px);
}

.wp-block-button.is-style-htio-cta .wp-block-button__link:focus-visible,
.wp-block-button.htio-button .wp-block-button__link:focus-visible {
  outline: 3px solid var(--htio-focus);
  outline-offset: 4px;
}

.htio-index-row a:focus-visible,
.htio-route-panel a:focus-visible {
  text-decoration-thickness: 3px;
}

.htio-form-row input:focus-visible,
.htio-form-row select:focus-visible,
.htio-form-row textarea:focus-visible {
  border-color: var(--htio-focus);
}

/* Legacy homepage behavior retained until the homepage checkpoints. */
.htio-hero > * {
  position: relative;
  z-index: 1;
}

.htio-hero > .wp-block-columns {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1220px !important;
  width: min(calc(100% - 48px), 1220px);
}

.htio-hero h1 {
  font-family: "Phudu", sans-serif;
  font-size: clamp(3.25rem, 6.5vw, 6.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.06;
  max-width: 12ch;
  text-wrap: balance;
}

.htio-hero-copy {
  color: var(--htio-muted);
  font-size: clamp(1.08rem, 1.6vw, 1.32rem);
  line-height: 1.65;
  max-width: 40.625rem;
}

.htio-system-card::before {
  border: 1px solid var(--htio-trace);
  content: "";
  inset: 13px;
  pointer-events: none;
  position: absolute;
}

.htio-system-card h2 {
  font-family: "Phudu", sans-serif;
  font-size: clamp(2.1rem, 3.5vw, 3.45rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.05;
  margin: 0;
}

.htio-site-footer {
  background: var(--htio-ink);
  color: var(--htio-paper);
}

.htio-site-footer a {
  color: inherit;
  text-decoration-color: var(--htio-trace);
  text-underline-offset: .18em;
}

.htio-site-footer a:hover,
.htio-site-footer a:focus-visible {
  color: var(--htio-signal);
  text-decoration-color: currentColor;
}

.htio-footer-brand {
  font-family: "Phudu", sans-serif;
  font-size: 2.15rem;
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: 1.02;
}

/* Article system: frontend behavior and responsive layout. */
.htio-article-shell {
  padding-bottom: clamp(5rem, 10vw, 8rem);
  padding-top: clamp(3rem, 8vw, 6.5rem);
}

.htio-article-header {
  max-width: 980px;
}

.htio-breadcrumb {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--small);
  margin-bottom: clamp(2.25rem, 5vw, 4.5rem);
}

.htio-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.htio-breadcrumb li:not(:last-child)::after {
  color: var(--htio-trace-strong);
  content: "/";
  margin-left: .45rem;
}

.htio-breadcrumb a,
.htio-article-taxonomy a,
.htio-article-byline a {
  color: inherit;
  text-underline-offset: .18em;
}

.htio-article-taxonomy,
.htio-article-kicker {
  align-items: center;
  color: var(--htio-action);
  display: flex;
  flex-wrap: wrap;
  font-size: .78rem;
  font-weight: 800;
  gap: .55rem;
  letter-spacing: .075em;
  margin: 0 0 1rem;
  text-transform: uppercase;
}

.htio-topic-chip {
  color: var(--htio-muted) !important;
  font-weight: 700;
  letter-spacing: .03em;
}

.htio-article-header .wp-block-post-title {
  font-size: var(--wp--preset--font-size--article-title);
  letter-spacing: -.045em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
}

.htio-article-lead {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.65;
  margin-top: 1.6rem;
  max-width: 48rem;
}

.htio-article-byline,
.htio-article-meta {
  align-items: center;
  color: var(--htio-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 650;
  gap: .65rem;
  margin-top: 1.5rem;
}

.htio-article-byline > span[aria-hidden="true"] {
  color: var(--htio-trace-strong);
}

.htio-article-meta p {
  margin: 0;
}

.htio-article-hero {
  margin-bottom: clamp(3.5rem, 7vw, 6rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.htio-article-hero img {
  aspect-ratio: 2.25 / 1;
  border-radius: var(--htio-radius-media);
  object-fit: cover;
}

.htio-article-layout {
  display: grid;
  gap: 3.5rem;
  grid-template-columns: 210px minmax(0, var(--wp--custom--layout--reading));
  justify-content: center;
}

.htio-article-rail {
  align-self: start;
  position: sticky;
  top: 110px;
}

.htio-toc {
  border-left: 2px solid var(--htio-ink);
  padding-left: 1rem;
}

.htio-toc summary {
  color: var(--htio-action);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .075em;
  list-style: none;
  min-height: 44px;
  padding-block: .7rem;
  text-transform: uppercase;
}

.htio-toc summary::-webkit-details-marker {
  display: none;
}

.htio-toc summary::after {
  color: var(--htio-muted);
  content: "+";
  float: right;
  font-size: 1rem;
}

.htio-toc[open] summary::after {
  content: "−";
}

.htio-toc__label,
.htio-callout__label,
.htio-sources__label {
  color: var(--htio-action);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .075em;
  margin: 0 0 .65rem;
}

.htio-toc ol {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0 0 .75rem;
}

.htio-toc li.is-level-3 {
  padding-left: .8rem;
}

.htio-toc a {
  color: var(--htio-muted);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}

.htio-toc a:hover,
.htio-toc a:focus-visible {
  color: var(--htio-ink);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.htio-article-content > * + * {
  margin-top: 1.65rem;
}

.htio-article-content h2 {
  font-size: clamp(1.95rem, 4vw, 2.8rem);
  margin-top: 4.8rem;
  scroll-margin-top: 110px;
}

.htio-article-content h3 {
  font-size: var(--wp--preset--font-size--heading-3);
}

.htio-callout {
  border: 2px solid var(--htio-ink);
  border-radius: var(--htio-radius-panel);
  margin: 2rem 0;
  padding: 1.35rem 1.45rem;
}

.htio-callout > div > :last-child {
  margin-bottom: 0;
}

.htio-callout--takeaway {
  background: var(--htio-signal);
}

.htio-callout--warning {
  background: #f5e8cf;
  border-color: var(--htio-evidence);
}

.htio-callout--success {
  background: var(--htio-field);
  border-color: var(--htio-action);
}

.htio-workflow {
  background: var(--htio-ink);
  border-radius: var(--htio-radius-panel);
  color: var(--htio-paper);
  counter-reset: flow;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 2rem 0;
  padding: .65rem 1.15rem;
}

.htio-workflow li {
  align-items: center;
  border-bottom: 1px solid rgba(244, 248, 243, .22);
  display: flex;
  font-weight: 700;
  gap: .8rem;
  padding: 1rem 0;
}

.htio-workflow li:last-child {
  border: 0;
}

.htio-workflow li::before {
  background: var(--htio-signal);
  border-radius: 999px;
  color: var(--htio-ink);
  content: counter(flow);
  counter-increment: flow;
  display: grid;
  font-size: .78rem;
  font-weight: 800;
  height: 1.6rem;
  place-items: center;
  width: 1.6rem;
}

.htio-prompt {
  border: 2px solid var(--htio-ink);
  border-radius: var(--htio-radius-panel);
  margin: 2rem 0;
  overflow: hidden;
}

.htio-prompt__bar {
  align-items: center;
  background: var(--htio-ink);
  color: var(--htio-paper);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .75rem 1rem;
}

.htio-prompt__bar p {
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  margin: 0;
  text-transform: uppercase;
}

.htio-prompt button {
  background: var(--htio-signal);
  border: 1px solid var(--htio-ink);
  border-radius: var(--htio-radius-control);
  color: var(--htio-ink);
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  min-height: 44px;
  padding: .55rem .85rem;
}

.htio-prompt pre {
  margin: 0;
  overflow-x: auto;
  padding: 1.15rem;
  white-space: pre-wrap;
}

.htio-compare {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 2rem 0;
}

.htio-compare section {
  background: var(--htio-field);
  border-radius: var(--htio-radius-panel);
  padding: 1.2rem;
}

.htio-compare section + section {
  background: var(--htio-signal);
}

.htio-compare h3 {
  margin: 0 0 .8rem;
}

.htio-faq {
  border-top: 2px solid var(--htio-ink);
  margin: 2rem 0;
}

.htio-faq details {
  border-bottom: 1px solid var(--htio-trace);
  padding: 1rem 0;
}

.htio-faq summary {
  cursor: pointer;
  font-weight: 800;
  min-height: 44px;
  padding-right: 2rem;
  position: relative;
}

.htio-faq summary::after {
  content: "+";
  font-size: 1.35rem;
  position: absolute;
  right: 0;
  top: -.3rem;
}

.htio-faq details[open] summary::after {
  content: "−";
}

.htio-faq details > div {
  color: var(--htio-muted);
  padding-top: .65rem;
}

.htio-faq details > div > :last-child {
  margin-bottom: 0;
}

.htio-sources {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  border-radius: var(--htio-radius-panel);
  margin: 2rem 0;
  padding: 1.25rem;
}

.htio-article-after,
.htio-article-end {
  border-top: 2px solid var(--htio-ink);
  margin-top: clamp(5rem, 10vw, 8rem);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.htio-article-next-step {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  display: grid;
  gap: .75rem;
  margin-bottom: clamp(4rem, 8vw, 6rem);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.htio-article-next-step > *,
.htio-article-related > *,
.htio-article-author-cta > div > * {
  margin-block: 0;
}

.htio-article-next-step h2,
.htio-article-related h2,
.htio-article-author-cta h2 {
  font-size: var(--wp--preset--font-size--heading-2);
}

.htio-article-next-step a,
.htio-article-author-cta a {
  font-weight: 800;
}

.htio-article-related {
  margin-bottom: clamp(4rem, 8vw, 6rem);
}

.htio-article-related > ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.htio-related-row {
  border-top: 1px solid var(--htio-trace);
  padding-block: 1.5rem;
}

.htio-related-row:last-child {
  border-bottom: 1px solid var(--htio-trace);
}

.htio-related-row h3,
.htio-related-row p {
  margin-block: 0;
}

.htio-related-row h3 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-block: .35rem .65rem;
}

.htio-related-row__meta {
  color: var(--htio-action);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.htio-article-author-cta {
  border-bottom: 2px solid var(--htio-ink);
  border-top: 2px solid var(--htio-ink);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: clamp(2rem, 5vw, 4rem);
}

.htio-article-author-cta > div {
  display: grid;
  gap: 1rem;
}

.htio-io-takeaway {
  background: var(--htio-ink);
  color: var(--htio-paper);
  margin-block: clamp(3rem, 7vw, 5rem);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.htio-io-takeaway__label {
  color: var(--htio-signal);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .07em;
}

.htio-io-takeaway__grid {
  margin-top: 1.5rem;
}

.htio-io-takeaway__grid > .wp-block-column {
  border-top: 1px solid rgba(244, 248, 243, .3);
  padding-top: 1rem;
}

.htio-io-takeaway__grid h3 {
  color: var(--htio-signal);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: .05em;
  margin-top: 0;
  text-transform: uppercase;
}

.htio-related-card {
  border-top: 2px solid var(--htio-ink);
  height: 100%;
  padding-top: 1rem;
}

.htio-related-card .wp-block-post-featured-image {
  margin-bottom: 1rem;
}

.htio-related-card .wp-block-post-title {
  margin-bottom: .5rem;
}

/* Editorial Pillar destinations. */
.htio-pillar-page {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.htio-pillar-page > .wp-block-shortcode,
.htio-pillar-destination {
  margin-inline: auto;
  max-width: var(--wp--custom--layout--canvas);
  width: min(calc(100% - 3rem), var(--wp--custom--layout--canvas));
}

.htio-pillar-destination {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.htio-pillar-destination .htio-breadcrumb {
  margin-bottom: calc(clamp(4rem, 9vw, 8rem) * -0.5);
}

.htio-pillar-hero {
  border-bottom: 2px solid var(--htio-ink);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}

.htio-pillar-hero > * {
  margin-block: 0;
}

.htio-pillar-hero .htio-section-heading__label {
  grid-column: 1 / -1;
}

.htio-pillar-hero h1 {
  font-size: clamp(3.2rem, 8vw, 6.9rem);
  letter-spacing: -.055em;
  line-height: .93;
  max-width: 10ch;
  text-wrap: balance;
}

.htio-pillar-hero > p:last-child {
  align-self: end;
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
  max-width: 40rem;
}

.htio-pillar-topics {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(13rem, 1fr) minmax(0, 3fr);
}

.htio-pillar-topics h2,
.htio-pillar-start h2,
.htio-pillar-latest h2,
.htio-pillar-paths h2,
.htio-pillar-newsletter h2 {
  font-size: var(--wp--preset--font-size--heading-2);
  margin-top: .5rem;
}

.htio-topic-chip-list {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
}

.htio-topic-filter {
  border: 1px solid var(--htio-trace-strong);
  color: var(--htio-ink);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 750;
  padding: .55rem .75rem;
  text-decoration: none;
}

.htio-topic-filter:is(:hover, :focus-visible),
.htio-topic-filter.is-active {
  background: var(--htio-ink);
  color: var(--htio-paper);
}

.htio-topic-filter.is-planned {
  border-style: dashed;
  color: var(--htio-muted);
}

.htio-pillar-filters {
  align-items: end;
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  display: grid;
  gap: .65rem 1rem;
  grid-template-columns: auto minmax(10rem, 1fr) auto minmax(10rem, 1fr) auto auto;
  margin-top: calc(clamp(4rem, 9vw, 8rem) * -0.55);
  padding: 1.25rem;
}

.htio-pillar-filters label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
}

.htio-pillar-filters select,
.htio-pillar-filters button {
  background: var(--htio-paper);
  border: 1px solid var(--htio-ink);
  border-radius: var(--htio-radius-control);
  color: var(--htio-ink);
  font: inherit;
  min-height: 44px;
  padding: .6rem .75rem;
}

.htio-pillar-filters button {
  background: var(--htio-action);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
}

.htio-pillar-filters > a {
  align-self: center;
  color: var(--htio-ink);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 750;
}

.htio-pillar-article-list,
.htio-pillar-project-list {
  display: grid;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.htio-pillar-article-row {
  border-top: 1px solid var(--htio-trace);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 4fr);
  padding-block: 1.5rem;
}

.htio-pillar-article-row:last-child {
  border-bottom: 1px solid var(--htio-trace);
}

.htio-pillar-article-row__meta {
  color: var(--htio-muted);
  display: grid;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 750;
  gap: .35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.htio-pillar-article-row h3,
.htio-pillar-article-row p {
  margin-block: 0;
}

.htio-pillar-article-row h3 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-bottom: .65rem;
}

.htio-pillar-empty {
  border-bottom: 2px solid var(--htio-ink);
  border-top: 2px solid var(--htio-ink);
  margin-top: 2rem;
  padding-block: clamp(2rem, 5vw, 4rem);
}

.htio-pillar-empty > * {
  margin-block: 0;
  max-width: 60ch;
}

.htio-pillar-empty h3 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-bottom: .75rem;
}

.htio-pillar-paths {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.htio-pillar-paths > div {
  border-top: 2px solid var(--htio-ink);
  padding-top: 1.5rem;
}

.htio-pillar-paths a,
.htio-pillar-newsletter a {
  font-weight: 800;
}

.htio-pillar-project-list {
  gap: 1.5rem;
}

.htio-pillar-project-list li {
  border-top: 1px solid var(--htio-trace);
  padding-top: 1rem;
}

.htio-pillar-project-list h3,
.htio-pillar-project-list p {
  margin-block: 0;
}

.htio-pillar-project-list h3 {
  margin-block: .35rem .5rem;
}

.htio-pillar-newsletter {
  align-items: end;
  background: var(--htio-ink);
  color: var(--htio-paper);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr);
  padding: clamp(2rem, 6vw, 4.5rem);
}

.htio-pillar-newsletter > * {
  margin-block: 0;
}

.htio-pillar-newsletter .htio-section-heading__label {
  color: var(--htio-signal);
}

.htio-pillar-newsletter a {
  color: var(--htio-paper);
}

/* Learn hub and capability paths. */
.htio-learn-page {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.htio-learn-page > .wp-block-shortcode,
.htio-learn-hub,
.htio-learning-path {
  margin-inline: auto;
  max-width: var(--wp--custom--layout--canvas);
  width: min(calc(100% - 3rem), var(--wp--custom--layout--canvas));
}

.htio-learn-hub,
.htio-learning-path {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.htio-learn-hub .htio-breadcrumb,
.htio-learning-path .htio-breadcrumb {
  margin-bottom: calc(clamp(4rem, 9vw, 8rem) * -0.5);
}

.htio-learn-hero {
  border-bottom: 2px solid var(--htio-ink);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.htio-learn-hero > * {
  margin-block: 0;
}

.htio-learn-hero .htio-section-heading__label {
  grid-column: 1 / -1;
}

.htio-learn-hero h1,
.htio-learning-path-hero h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -.055em;
  line-height: .95;
  text-wrap: balance;
}

.htio-learn-hero > p:last-child {
  align-self: end;
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
}

.htio-learning-map > h2,
.htio-learning-capabilities > h2,
.htio-learning-reading > h2,
.htio-learning-next h2,
.htio-learn-principle h2 {
  font-size: var(--wp--preset--font-size--heading-2);
  margin-top: .5rem;
}

.htio-learning-map > ol {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}

.htio-learning-route {
  border-left: 1px solid var(--htio-trace);
  border-top: 2px solid var(--htio-ink);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 1.4rem;
}

.htio-learning-route:last-child {
  border-right: 1px solid var(--htio-trace);
}

.htio-learning-route > * {
  margin-block: 0;
}

.htio-learning-route h3 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-block: 1.4rem .8rem;
}

.htio-learning-route__number,
.htio-learning-route__state {
  color: var(--htio-action);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.htio-learning-route__outcome {
  border-top: 1px solid var(--htio-trace);
  margin-top: 1.25rem !important;
  padding-top: 1.25rem;
}

.htio-learning-route__state {
  margin-top: auto !important;
  padding-top: 1.5rem;
}

.htio-learning-route > p:last-child {
  margin-top: .75rem;
}

.htio-learning-route a,
.htio-learning-next a {
  font-weight: 800;
}

.htio-learn-principle {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  max-width: 64rem;
  padding: clamp(2rem, 5vw, 4rem);
}

.htio-learn-principle > * {
  margin-block: 0;
}

.htio-learn-principle h2 {
  margin-block: .5rem 1rem;
}

.htio-learning-path-hero {
  border-bottom: 2px solid var(--htio-ink);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.htio-learning-path-hero > div > * {
  margin-block: 0;
}

.htio-learning-path-hero__audience {
  color: var(--htio-action);
  font-weight: 800;
  margin-top: 1rem !important;
}

.htio-learning-path-hero > div:last-child {
  align-self: end;
  border-left: 4px solid var(--htio-action);
  display: grid;
  gap: .75rem;
  padding-left: 1.5rem;
}

.htio-learning-capabilities > ol {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.htio-learning-capabilities li {
  align-items: center;
  border-top: 1px solid var(--htio-trace);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding-block: 1.25rem;
}

.htio-learning-capabilities li:last-child {
  border-bottom: 1px solid var(--htio-trace);
}

.htio-learning-capabilities li span {
  color: var(--htio-action);
  font-family: "Phudu", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}

.htio-learning-capabilities li p {
  font-size: var(--wp--preset--font-size--lead);
  margin: 0;
}

.htio-learning-course-state,
.htio-learning-empty {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  padding: 1.5rem;
}

.htio-learning-course-state > *,
.htio-learning-empty > * {
  margin-block: 0;
}

.htio-learning-empty h3 {
  margin-bottom: .75rem;
}

.htio-learning-article-list {
  display: grid;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
}

.htio-learning-article-list li {
  border-top: 1px solid var(--htio-trace);
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(8rem, 1fr) minmax(0, 4fr);
  padding-block: 1.5rem;
}

.htio-learning-article-list li:last-child {
  border-bottom: 1px solid var(--htio-trace);
}

.htio-learning-article-list__meta {
  color: var(--htio-action);
  display: grid;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.htio-learning-article-list h3,
.htio-learning-article-list p {
  margin-block: 0;
}

.htio-learning-article-list h3 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-bottom: .65rem;
}

.htio-learning-next {
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.htio-learning-next > div {
  border-top: 2px solid var(--htio-ink);
  padding-top: 1.5rem;
}

/* I/O Lab hub and Project system. */
.htio-lab-page,
.htio-project-shell {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.htio-lab-page > .wp-block-shortcode,
.htio-lab-hub,
.htio-project-header,
.htio-project-after {
  margin-inline: auto;
  max-width: var(--wp--custom--layout--canvas);
  width: min(calc(100% - 3rem), var(--wp--custom--layout--canvas));
}

.htio-lab-hub {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.htio-lab-hub .htio-breadcrumb,
.htio-project-header .htio-breadcrumb {
  margin-bottom: calc(clamp(4rem, 9vw, 8rem) * -0.5);
}

.htio-lab-hero {
  border-bottom: 2px solid var(--htio-ink);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.htio-lab-hero > * {
  margin-block: 0;
}

.htio-lab-hero .htio-section-heading__label {
  grid-column: 1 / -1;
}

.htio-lab-hero h1,
.htio-project-hero h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -.055em;
  line-height: .95;
  text-wrap: balance;
}

.htio-lab-hero > p:last-child {
  align-self: end;
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
}

.htio-lab-filters {
  align-items: end;
  border-block: 1px solid var(--htio-trace);
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(12rem, 1fr)) auto auto;
  padding-block: 1.5rem;
}

.htio-lab-filters label {
  display: grid;
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
  gap: .45rem;
}

.htio-lab-filters select,
.htio-lab-filters button {
  background: var(--htio-paper);
  border: 1px solid var(--htio-ink);
  color: var(--htio-ink);
  min-height: 46px;
  padding: .7rem .9rem;
}

.htio-lab-filters button {
  background: var(--htio-action);
  color: var(--htio-paper);
  cursor: pointer;
  font-weight: 800;
}

.htio-lab-filters > a {
  align-self: center;
  font-weight: 800;
}

.htio-lab-projects__heading h2,
.htio-project-related h2,
.htio-project-cta h2,
.htio-project-evidence-state h2 {
  font-size: var(--wp--preset--font-size--heading-2);
  margin-top: .5rem;
}

.htio-project-grid {
  display: grid;
  gap: 0 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
}

.htio-project-card {
  border-top: 2px solid var(--htio-ink);
  display: flex;
  flex-direction: column;
  padding-block: 1.5rem 2.5rem;
}

.htio-project-card > * {
  margin-block: 0;
}

.htio-project-card__meta {
  align-items: center;
  color: var(--htio-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  gap: .75rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.htio-project-status {
  border: 1px solid currentColor;
  color: var(--htio-action);
  display: inline-flex;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .05em;
  padding: .2rem .45rem;
  text-transform: uppercase;
}

.htio-project-status.is-experiment,
.htio-project-status.is-building {
  color: var(--htio-evidence);
}

.htio-project-status.is-archived {
  color: var(--htio-muted);
}

.htio-project-card h2 {
  font-size: var(--wp--preset--font-size--section-title);
  margin-block: 1.25rem .8rem;
}

.htio-project-card h2 a {
  color: inherit;
  text-decoration: none;
}

.htio-project-card__problem {
  font-size: var(--wp--preset--font-size--lead);
}

.htio-project-card__outcome {
  border-top: 1px solid var(--htio-trace);
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--small);
  margin-top: 1.25rem !important;
  padding-top: 1.25rem;
}

.htio-project-card__action {
  margin-top: auto !important;
  padding-top: 1.5rem;
}

.htio-project-card__action a {
  font-weight: 800;
}

.htio-lab-empty,
.htio-project-related__empty {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  margin-top: 2rem;
  padding: 1.5rem;
}

.htio-lab-empty > *,
.htio-project-related__empty > * {
  margin-block: 0;
}

.htio-lab-empty h3 {
  margin-bottom: .75rem;
}

.htio-project-header {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.htio-project-hero {
  border-bottom: 2px solid var(--htio-ink);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.htio-project-hero__title > * {
  margin-block: 0;
}

.htio-project-hero__problem {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
  margin-top: 1.5rem !important;
  max-width: 42ch;
}

.htio-project-hero__jump {
  margin-top: 2rem !important;
}

.htio-project-hero__jump a {
  font-weight: 800;
}

.htio-project-facts {
  align-self: end;
  border-top: 2px solid var(--htio-ink);
  margin: 0;
}

.htio-project-facts > div {
  border-bottom: 1px solid var(--htio-trace);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(6rem, 1fr) minmax(0, 2fr);
  padding-block: .85rem;
}

.htio-project-facts dt {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.htio-project-facts dd {
  margin: 0;
}

.htio-project-hero-asset {
  margin-block: clamp(3rem, 7vw, 6rem);
}

.htio-project-hero-asset img {
  border: 1px solid var(--htio-trace);
}

.htio-project-narrative {
  margin-inline: auto;
  max-width: var(--wp--custom--layout--reading);
  width: min(calc(100% - 3rem), var(--wp--custom--layout--reading));
}

.htio-project-evidence-state {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-evidence);
  margin-bottom: clamp(3rem, 7vw, 6rem);
  padding: clamp(1.5rem, 5vw, 3rem);
}

.htio-project-evidence-state > * {
  margin-block: 0;
}

.htio-project-evidence-state h2 {
  margin-block: .5rem 1rem;
}

.htio-project-after {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
  margin-top: clamp(4rem, 9vw, 8rem);
}

.htio-project-related {
  border-top: 2px solid var(--htio-ink);
  padding-top: 2rem;
}

.htio-project-related__groups {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
}

.htio-project-related__groups > section {
  border-top: 1px solid var(--htio-trace);
  padding-top: 1rem;
}

.htio-project-related__groups h3 {
  margin-top: 0;
}

.htio-project-related__groups ul {
  display: grid;
  gap: .75rem;
  margin-bottom: 0;
  padding-left: 1.2rem;
}

.htio-project-cta {
  background: var(--htio-ink);
  color: var(--htio-paper);
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 3fr) minmax(15rem, 1fr);
  padding: clamp(2rem, 6vw, 4.5rem);
}

.htio-project-cta > div > * {
  margin-block: 0;
}

.htio-project-cta .htio-section-heading__label {
  color: var(--htio-signal);
}

.htio-project-cta__actions {
  align-content: center;
  display: grid;
  gap: 1rem;
}

.htio-project-cta__actions a {
  color: var(--htio-paper);
  font-weight: 800;
}

.htio-project-cta__primary {
  border: 1px solid var(--htio-paper);
  padding: .8rem 1rem;
  text-decoration: none;
}

/* Supporting destinations, Topic, Search and recovery. */
.htio-support-page,
.htio-search-shell,
.htio-topic-shell,
.htio-404-shell {
  padding-block: clamp(3rem, 8vw, 7rem);
}

.htio-support-page > .wp-block-shortcode,
.htio-support-destination,
.htio-search-shell > .wp-block-shortcode,
.htio-search-page,
.htio-topic-shell > .wp-block-shortcode,
.htio-topic-hub,
.htio-404-recovery {
  margin-inline: auto;
  max-width: var(--wp--custom--layout--canvas);
  width: min(calc(100% - 3rem), var(--wp--custom--layout--canvas));
}

.htio-support-destination,
.htio-search-page,
.htio-topic-hub,
.htio-article-archive {
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.htio-support-destination .htio-breadcrumb,
.htio-search-page .htio-breadcrumb,
.htio-topic-hub .htio-breadcrumb,
.htio-article-archive .htio-breadcrumb {
  margin-bottom: calc(clamp(4rem, 9vw, 8rem) * -0.5);
}

.htio-support-hero,
.htio-search-hero,
.htio-topic-hero,
.htio-article-archive__hero {
  border-bottom: 2px solid var(--htio-ink);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 8fr) minmax(18rem, 4fr);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}

.htio-support-hero > *,
.htio-search-hero > *,
.htio-topic-hero > *,
.htio-article-archive__hero > * {
  margin-block: 0;
}

.htio-support-hero .htio-section-heading__label,
.htio-search-hero .htio-section-heading__label,
.htio-topic-hero .htio-section-heading__label,
.htio-article-archive__hero .htio-section-heading__label {
  grid-column: 1 / -1;
}

.htio-support-hero h1,
.htio-search-hero h1,
.htio-topic-hero h1,
.htio-article-archive__hero h1,
.htio-404-recovery h1 {
  font-size: clamp(3rem, 7vw, 6.5rem);
  letter-spacing: -.055em;
  line-height: .95;
  text-wrap: balance;
}

.htio-support-hero > p:last-child,
.htio-search-hero > p:last-child,
.htio-topic-hero > p:last-child,
.htio-article-archive__hero > p:last-child {
  align-self: end;
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
  line-height: 1.6;
}

.htio-support-section > header,
.htio-topic-projects > header {
  display: grid;
  gap: .75rem;
  max-width: 52rem;
}

.htio-support-section > header > *,
.htio-topic-projects > header > * {
  margin-block: 0;
}

.htio-support-section > header h2,
.htio-topic-projects > header h2,
.htio-search-results > h2,
.htio-search-empty h2,
.htio-search-start h2 {
  font-size: var(--wp--preset--font-size--heading-2);
}

.htio-support-index {
  margin-top: 2.5rem;
}

.htio-article-archive__filters {
  align-items: end;
  border-block: 1px solid var(--htio-trace);
  display: grid;
  gap: 1rem;
  grid-template-columns: auto minmax(10rem, 1fr) auto minmax(10rem, 1fr) auto auto;
  padding-block: 1.25rem;
}

.htio-article-archive__filters label {
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  text-transform: uppercase;
}

.htio-article-archive__filters select,
.htio-article-archive__filters button {
  min-height: 48px;
}

.htio-article-archive__filters button {
  background: var(--htio-action);
  border: 1px solid var(--htio-action);
  color: var(--htio-paper);
  font-weight: 800;
  padding-inline: 1rem;
}

.htio-article-archive__filters > a {
  align-self: center;
  font-weight: 800;
}

.htio-article-archive__results > h2 {
  font-size: var(--wp--preset--font-size--heading-2);
  margin-bottom: 2rem;
}

.htio-article-archive__empty {
  border-block: 1px solid var(--htio-trace);
  padding-block: 2rem;
}

.htio-support-row {
  align-items: start;
  border-top: 1px solid var(--htio-trace);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(9rem, 1fr) minmax(0, 4fr) minmax(9rem, 1fr);
  padding-block: 1.5rem;
}

.htio-support-row:last-child {
  border-bottom: 1px solid var(--htio-trace);
}

.htio-support-row__state {
  color: var(--htio-action);
  display: grid;
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  gap: .45rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.htio-support-row__state small {
  color: var(--htio-muted);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.htio-support-row > div > * {
  margin-block: 0;
}

.htio-support-row h3 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-bottom: .65rem !important;
}

.htio-support-row__action {
  justify-self: end;
}

.htio-support-row__action a {
  font-weight: 800;
}

.htio-support-row__action span {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--small);
}

.htio-support-next {
  background: var(--htio-ink);
  color: var(--htio-paper);
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 3fr) minmax(12rem, 1fr);
  padding: clamp(2rem, 6vw, 4.5rem);
}

.htio-support-next > * {
  margin-block: 0;
}

.htio-support-next .htio-section-heading__label {
  color: var(--htio-signal);
}

.htio-support-next h2 {
  margin-bottom: 0;
}

.htio-support-next p:last-child {
  align-self: center;
}

.htio-support-next a {
  color: var(--htio-paper);
  font-weight: 800;
}

.htio-topic-groups {
  display: grid;
  gap: 0 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.htio-topic-group,
.htio-topic-projects {
  border-top: 2px solid var(--htio-ink);
  padding-block: 1.5rem 3rem;
}

.htio-topic-group > header > *,
.htio-topic-group li > * {
  margin-block: 0;
}

.htio-topic-group > header {
  display: grid;
  gap: .65rem;
}

.htio-topic-group h2 {
  font-size: var(--wp--preset--font-size--heading-3);
}

.htio-topic-group ul,
.htio-topic-projects ul {
  display: grid;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.htio-topic-group li,
.htio-topic-projects li {
  border-top: 1px solid var(--htio-trace);
  display: grid;
  gap: .45rem;
  padding-block: 1rem;
}

.htio-topic-group li a,
.htio-topic-projects li a {
  font-weight: 800;
}

.htio-topic-group li span,
.htio-topic-projects li span,
.htio-topic-empty {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--small);
}

.htio-topic-projects ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.htio-topic-projects li {
  padding-right: 2rem;
}

.htio-search-form,
.htio-404-search {
  align-items: end;
  border-block: 1px solid var(--htio-trace);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(12rem, 3fr) minmax(10rem, 1fr) auto;
  padding-block: 1.5rem;
}

.htio-search-form label,
.htio-404-search label {
  font-size: var(--wp--preset--font-size--small);
  font-weight: 800;
}

.htio-search-form input,
.htio-search-form select,
.htio-search-form button,
.htio-404-search input,
.htio-404-search button {
  background: var(--htio-paper);
  border: 1px solid var(--htio-ink);
  color: var(--htio-ink);
  min-height: 48px;
  padding: .75rem .9rem;
}

.htio-search-form button,
.htio-404-search button {
  background: var(--htio-action);
  color: var(--htio-paper);
  cursor: pointer;
  font-weight: 800;
}

.htio-search-results,
.htio-search-empty,
.htio-search-start {
  max-width: 58rem;
}

.htio-search-result {
  border-top: 1px solid var(--htio-trace);
  padding-block: 1.5rem;
}

.htio-search-result:last-child {
  border-bottom: 1px solid var(--htio-trace);
}

.htio-search-result > * {
  margin-block: 0;
}

.htio-search-result h2 {
  font-size: var(--wp--preset--font-size--heading-3);
  margin-block: .6rem;
}

.htio-search-result__meta,
.htio-search-result__topics {
  color: var(--htio-action);
  font-size: var(--wp--preset--font-size--micro);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.htio-search-empty {
  background: var(--htio-field);
  border-left: 4px solid var(--htio-action);
  padding: clamp(1.5rem, 5vw, 3rem);
}

.htio-search-start ul,
.htio-search-empty ul,
.htio-404-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
}

.htio-search-start a,
.htio-search-empty a,
.htio-404-links a {
  font-weight: 800;
}

.htio-404-recovery {
  display: grid;
  gap: 2rem;
  max-width: 58rem;
  padding-block: clamp(3rem, 8vw, 7rem);
}

.htio-404-recovery > * {
  margin-block: 0;
}

.htio-404-recovery > p:nth-of-type(2) {
  color: var(--htio-muted);
  font-size: var(--wp--preset--font-size--lead);
}

.htio-404-search {
  grid-template-columns: minmax(0, 1fr) auto;
}

.htio-404-search label {
  grid-column: 1 / -1;
}

@media (max-width: 1024px) {
  .htio-nav-desktop,
  .htio-header-utility-link {
    display: none;
  }

  .htio-nav-mobile {
    display: flex;
  }

  .htio-header-bar {
    gap: var(--wp--preset--spacing--sm);
  }

  .htio-brand {
    margin-right: auto;
  }

  .htio-header-utilities {
    gap: var(--wp--preset--spacing--xs);
  }

  .htio-footer-grid {
    flex-wrap: wrap !important;
  }

  .htio-footer-grid > .wp-block-column {
    flex-basis: calc(50% - var(--wp--preset--spacing--xl)) !important;
  }
}

@media (min-width: 900px) {
  .htio-home-hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  }

  .htio-foundation-layout {
    grid-template-columns: minmax(0, 5fr) minmax(22rem, 7fr);
  }

  .htio-newsletter-panel {
    grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  }

  .htio-about-strip {
    grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  }

  .htio-pillar-row {
    grid-template-columns: minmax(10rem, 1fr) minmax(16rem, 2fr) minmax(15rem, 1.5fr) auto;
  }

  .htio-io-rail.is-horizontal,
  .wp-block-list.is-style-htio-workflow.is-horizontal {
    grid-template-columns: repeat(var(--htio-rail-columns, 4), minmax(0, 1fr));
  }

  .htio-io-rail.is-horizontal .htio-io-rail__step,
  .wp-block-list.is-style-htio-workflow.is-horizontal > li {
    align-content: start;
    border-left: 1px solid var(--htio-trace);
    border-top: 2px solid var(--htio-ink);
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }
}

@media (max-width: 900px) {
  .htio-learn-hero,
  .htio-learning-path-hero,
  .htio-learning-next,
  .htio-lab-hero,
  .htio-project-hero,
  .htio-project-cta,
  .htio-support-hero,
  .htio-search-hero,
  .htio-topic-hero,
  .htio-support-next {
    grid-template-columns: 1fr;
  }

  .htio-support-row {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
  }

  .htio-support-row__action {
    grid-column: 2;
    justify-self: start;
  }

  .htio-search-form {
    grid-template-columns: 1fr 1fr;
  }

  .htio-search-form button {
    justify-self: start;
  }

  .htio-lab-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .htio-lab-filters button,
  .htio-lab-filters > a {
    justify-self: start;
  }

  .htio-project-related__groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .htio-learning-map > ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .htio-pillar-hero,
  .htio-pillar-topics,
  .htio-pillar-paths,
  .htio-pillar-newsletter {
    grid-template-columns: 1fr;
  }

  .htio-pillar-filters {
    align-items: stretch;
    grid-template-columns: auto minmax(0, 1fr);
  }

  .htio-pillar-filters button,
  .htio-pillar-filters > a {
    grid-column: 1 / -1;
  }

  .htio-pillar-row__action {
    justify-self: start;
  }

  .htio-article-layout {
    display: block;
  }

  .htio-article-rail {
    margin-bottom: 2.5rem;
    position: static;
  }

  .htio-toc {
    border: 1px solid var(--htio-trace);
    border-left: 4px solid var(--htio-action);
    border-radius: var(--htio-radius-panel);
    padding: .25rem 1rem;
  }

  .htio-article-author-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .htio-learn-page > .wp-block-shortcode,
  .htio-learn-hub,
  .htio-learning-path,
  .htio-lab-page > .wp-block-shortcode,
  .htio-lab-hub,
  .htio-project-header,
  .htio-project-after,
  .htio-support-page > .wp-block-shortcode,
  .htio-support-destination,
  .htio-search-shell > .wp-block-shortcode,
  .htio-search-page,
  .htio-topic-shell > .wp-block-shortcode,
  .htio-topic-hub,
  .htio-404-recovery {
    width: min(calc(100% - 2.5rem), var(--wp--custom--layout--canvas));
  }

  .htio-project-narrative {
    width: min(calc(100% - 2.5rem), var(--wp--custom--layout--reading));
  }

  .htio-lab-filters,
  .htio-project-grid,
  .htio-project-related__groups,
  .htio-topic-groups,
  .htio-topic-projects ul,
  .htio-search-form,
  .htio-404-search,
  .htio-support-row,
  .htio-article-archive__filters {
    grid-template-columns: 1fr;
  }

  .htio-support-row__action,
  .htio-search-form button {
    grid-column: auto;
  }

  .htio-search-form button,
  .htio-404-search button {
    justify-self: stretch;
  }

  .htio-lab-filters button,
  .htio-lab-filters > a {
    grid-column: auto;
  }

  .htio-learning-map > ol,
  .htio-learning-article-list li {
    grid-template-columns: 1fr;
  }

  .htio-pillar-page > .wp-block-shortcode,
  .htio-pillar-destination {
    width: min(calc(100% - 2.5rem), var(--wp--custom--layout--canvas));
  }

  .htio-pillar-article-row {
    grid-template-columns: 1fr;
  }

  .htio-section__inner {
    width: min(calc(100% - 2.5rem), var(--wp--custom--layout--canvas));
  }

  .htio-index-row {
    grid-template-columns: 1fr;
  }

  .htio-index-row__action {
    justify-self: start;
  }

  .htio-action-group {
    align-items: stretch;
    flex-direction: column;
  }

  .htio-footer-intro {
    align-items: start;
    flex-direction: column;
  }

  .htio-footer-grid > .wp-block-column {
    flex-basis: 100% !important;
  }

  .htio-footer-legal {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 781px) {
  .htio-site-header .wp-block-group {
    gap: .8rem;
  }

  .htio-header-newsletter .wp-block-button__link {
    min-height: 44px;
    padding: .6rem .75rem !important;
  }

  .htio-hero > .wp-block-columns {
    width: min(calc(100% - 40px), 1220px);
  }

  .htio-hero h1 {
    font-size: clamp(3.25rem, 14vw, 5rem);
  }

  .htio-system-card {
    margin-top: 1rem;
  }
}

@media (max-width: 600px) {
  .htio-home-hero__title {
    font-size: clamp(3.2rem, 15vw, 4.75rem);
  }

  .htio-article-shell {
    padding-top: 38px !important;
  }

  .htio-article-header .wp-block-post-title {
    font-size: clamp(2.35rem, 8.5vw, 3.25rem);
    max-width: 18ch;
  }

  .htio-article-hero {
    margin-bottom: 2.5rem !important;
    margin-top: 2rem !important;
  }

  .htio-compare {
    grid-template-columns: 1fr;
  }

  .htio-prompt__bar {
    align-items: flex-start;
    flex-direction: column;
  }

  .htio-article-end .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}