:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:root {
  --text: var(--text-dark);
  --muted: var(--tertiary);
  --section-space: var(--section-space-m);
  --font-heading: var(--heading-font-family), ui-sans-serif, system-ui, sans-serif;
  --font-body: var(--text-font-family), ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: clamp(var(--h1), 6vw, 5.5rem);
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  align-self: flex-start;
  padding: 0.85em 1.6em;
  font-family: var(--font-body);
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  background-color: var(--secondary);
  border: 1px solid var(--secondary);
  border-radius: 0; /* ACSS btn-border-radius: 0 */
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  &:hover, &:focus-visible {
    color: var(--secondary);
    background-color: var(--primary);
    border-color: var(--primary);
  }
}
.text-link {
  color: var(--secondary);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
  &:hover { color: var(--muted); }
}
.site-header {
  position: relative;
  z-index: 10;
  anchor-name: --site-header;
  padding-block: var(--space-xs);
  padding-inline: var(--gutter);
  background-color: var(--white);
  border-block-end: 1px solid var(--base-light);
}
.site-header__container {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-s);
}
.site-header__brand {
  display: block;
  line-height: 0;
}
.site-header__logo {
  display: block;
  inline-size: auto;
  block-size: clamp(3rem, 4vw, 4.5rem);
}
.site-header__toggle {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  aspect-ratio: 1;
  padding: 0;
  color: var(--secondary);
  background: none;
  border: 0;
  cursor: pointer;
  &:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
  }
  @media (min-width: 64em) {
    display: none;
  }
}
.site-header__nav {
  display: none;
  /* Mobile: a drawer from the right, below the header (native popover, no script). */
  position: fixed;
  position-anchor: --site-header;
  inset: auto;
  inset-block-start: anchor(bottom, 6.5rem);
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: min(85vw, 360px);
  block-size: auto;
  margin: 0;
  padding: var(--space-l) var(--space-m);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-l);
  overflow-y: auto;
  color: var(--secondary);
  background-color: var(--white);
  border: 0;
  border-inline-start: 1px solid var(--base-light);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), overlay 0.3s allow-discrete, display 0.3s allow-discrete;
  &:popover-open {
    display: flex;
    transform: translateX(0);
    @starting-style {
      transform: translateX(100%);
    }
  }
  &::backdrop {
    inset-block-start: 6.5rem;
    background-color: rgb(0 0 0 / 0);
    transition: background-color 0.3s ease, overlay 0.3s allow-discrete, display 0.3s allow-discrete;
  }
  &:popover-open::backdrop {
    background-color: rgb(0 0 0 / 0.25);
    @starting-style {
      background-color: rgb(0 0 0 / 0);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
    &:popover-open {
      transform: none;
      opacity: 1;
      @starting-style {
        transform: none;
        opacity: 0;
      }
    }
  }
  @media (min-width: 64em) {
    display: flex;
    position: static;
    inset: auto;
    inline-size: auto;
    padding: 0;
    flex-direction: row;
    align-items: center;
    overflow: visible;
    background: none;
    border: 0;
    transform: none;
    opacity: 1;
    transition: none;
  }
}
.site-header__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
  @media (min-width: 64em) {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }
}
.site-header__item {
  display: flex;
  align-items: center;
  .site-header__nav:popover-open & {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    @starting-style {
      opacity: 0;
      transform: translateX(1rem);
    }
  }
  .site-header__nav:popover-open &:nth-child(2) { transition-delay: 40ms; }
  .site-header__nav:popover-open &:nth-child(3) { transition-delay: 80ms; }
  .site-header__nav:popover-open &:nth-child(4) { transition-delay: 120ms; }
  @media (prefers-reduced-motion: reduce) {
    .site-header__nav:popover-open & {
      transition: none;
    }
  }
  @media (min-width: 64em) {
    &:not(:first-child)::before {
      content: "/";
      padding-inline: var(--space-m);
      color: var(--base-light);
      font-weight: 400;
    }
  }
}
.site-header__link {
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  text-decoration: none;
  &:hover, &[aria-current="page"] {
    color: var(--muted);
  }
}
.site-footer {
  padding-block: var(--section-space);
  padding-inline: var(--gutter);
  background-color: var(--white);
  border-block-start: 1px solid var(--base-light);
}
.site-footer__container {
  position: relative;
  align-items: center;
  gap: var(--space-m);
  text-align: center;
}
.site-footer__brand {
  display: block;
  line-height: 0;
}
.site-footer__logo {
  display: block;
  inline-size: auto;
  block-size: 3.75rem;
}
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__item {
  display: flex;
}
.site-footer__link {
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  text-decoration: none;
  &:hover {
    color: var(--muted);
  }
}
.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-m);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__legal-link {
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.3em;
  &:hover {
    color: var(--secondary);
  }
}
.site-footer__copyright {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.site-footer__top {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  aspect-ratio: 1;
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition);
  @media (min-width: 64em) {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
  }
  &:hover {
    color: var(--secondary);
    background-color: var(--primary);
  }
}
.post-card {
  break-inside: avoid;
  padding-block-end: var(--space-xl);
  list-style: none;
}
.post-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  color: inherit;
  text-decoration: none;
}
.post-card__media {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--base-ultra-light);
  border-radius: var(--radius);
}
.post-card__image {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter var(--transition);
  .post-card__link:hover & {
    filter: grayscale(0);
  }
}
.post-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  padding: var(--space-l);
  text-align: center;
  background-color: color-mix(in oklch, var(--primary) 94%, transparent);
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.35s ease, opacity 0.35s ease;
  .post-card__link:is(:hover, :focus-visible) & {
    opacity: 1;
    transform: none;
  }
  .post-card__media:not(:has(img)) > & {
    opacity: 1;
    transform: none;
    background-color: var(--base-ultra-light);
  }
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}
.post-card__overlay-title {
  font-family: var(--font-heading);
  font-size: var(--text-l);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
}
.post-card__rule {
  --empty-element-size: 0;
  display: block;
  inline-size: 4.5rem;
  block-size: 1px;
  background-color: var(--secondary);
}
.post-card__category {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
}
.post-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.post-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--muted);
}
.post-card__title {
  font-size: var(--h4);
  font-weight: 400;
  line-height: 1.3;
  color: var(--secondary);
  text-transform: none;
  letter-spacing: 0;
  .post-card__link:hover & {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}
.posts-grid {
  columns: 1;
  column-gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  @media (min-width: 48em) {
    columns: 2;
  }
  @media (min-width: 64em) {
    columns: 3;
  }
}
.hero {
  background-color: var(--base-ultra-light);
}
.hero__container {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
  @media (min-width: 64em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-m);
}
.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--muted);
}
.hero__title {
  font-size: var(--display);
  line-height: 1.09;
  letter-spacing: -0.01em;
}
.hero__highlight {
  background-color: var(--primary);
  padding-inline: 0.15em;
  border-radius: calc(var(--radius) / 2);
  box-decoration-break: clone;
}
.hero__lead {
  max-inline-size: 34em;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l);
  padding-block-start: var(--space-s);
}
.storyboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-m);
}
.storyboard__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
}
.storyboard__frame {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  aspect-ratio: 258 / 184;
  padding: var(--space-s);
  background-color: var(--white);
  border: 1.5px solid var(--secondary);
  border-radius: var(--radius);
  overflow: hidden;
}
.storyboard__bar {
  --empty-element-size: 0;
  display: block;
  block-size: 0.55em;
  inline-size: 95%;
  background-color: var(--secondary);
}
.storyboard__bar--logo {
  inline-size: 12%;
  block-size: 0.5em;
}
.storyboard__row {
  display: flex;
  gap: var(--space-s);
  flex-grow: 1;
  padding-block-start: var(--space-xs);
}
.storyboard__stack {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  inline-size: 45%;
  flex-shrink: 0;
}
.storyboard__bar--short {
  inline-size: 65%;
}
.storyboard__line {
  --empty-element-size: 0;
  display: block;
  block-size: 2px;
  inline-size: 90%;
  background-color: var(--base-light);
}
.storyboard__line--short {
  inline-size: 75%;
}
.storyboard__media {
  --empty-element-size: 0;
  display: block;
  flex-grow: 1;
}
.storyboard__media--placeholder {
  border: 1.5px dashed var(--secondary);
  background: linear-gradient(to top right, transparent calc(50% - 0.5px), var(--secondary) 50%, transparent calc(50% + 0.5px)), linear-gradient(to bottom right, transparent calc(50% - 0.5px), var(--secondary) 50%, transparent calc(50% + 0.5px));
}
.storyboard__caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}
.storyboard__number {
  color: var(--secondary);
}
.storyboard__frame--accent {
  background-color: var(--primary);
}
.storyboard__sample {
  font-family: var(--font-heading);
  font-size: var(--text-m);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--secondary);
}
.storyboard__line--dark {
  background-color: var(--secondary);
}
.storyboard__media--dark {
  background-color: var(--secondary);
}
.storyboard__swatches {
  display: flex;
  gap: var(--space-xs);
}
.storyboard__swatch {
  --empty-element-size: 0;
  display: block;
  inline-size: 2.25em;
  aspect-ratio: 1;
  border: 1px solid var(--secondary);
  border-radius: 4px;
}
.storyboard__swatch--ink {
  background-color: var(--secondary);
}
.storyboard__swatch--accent {
  background-color: var(--primary);
}
.storyboard__swatch--light {
  background-color: var(--base-ultra-light);
}
.storyboard__swatch--muted {
  background-color: var(--muted);
}
.storyboard__type {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-block-start: auto;
}
.storyboard__aa {
  font-family: var(--font-heading);
  font-size: var(--h2);
  font-weight: 400;
  line-height: 1;
  color: var(--secondary);
}
.storyboard__token {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.8;
  text-align: end;
  white-space: pre-line;
  color: var(--secondary);
}
.storyboard__frame--browser {
  padding: 0;
  gap: 0;
}
.storyboard__browser-bar {
  display: flex;
  align-items: center;
  gap: 0.3em;
  padding-inline: var(--space-xs);
  block-size: 1.6em;
  flex-shrink: 0;
  border-block-end: 1.5px solid var(--secondary);
}
.storyboard__dot {
  --empty-element-size: 0;
  display: block;
  inline-size: 0.4em;
  aspect-ratio: 1;
  border: 1px solid var(--secondary);
  border-radius: 50%;
}
.storyboard__url {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--muted);
  padding-inline-start: 0.5em;
}
.storyboard__canvas {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex-grow: 1;
  padding: var(--space-xs);
}
.storyboard__outline {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  flex-grow: 1;
  padding: 0.35em 0.5em;
  border: 1px dashed var(--secondary);
}
.storyboard__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--secondary);
}
.storyboard__outline--inner {
  justify-content: center;
  border-color: var(--muted);
}
.storyboard__label--muted {
  color: var(--muted);
}
.storyboard__tiles {
  display: flex;
  gap: 0.35em;
  block-size: 22%;
}
.storyboard__tile {
  --empty-element-size: 0;
  display: block;
  flex-grow: 1;
  background-color: var(--base-ultra-light);
}
.latest-posts__container {
  gap: var(--space-xxl);
}
.latest-posts__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
}
.latest-posts__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.topic-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.topic-filters__link {
  padding: 0.75em 1.25em;
  font-size: var(--text-s);
  letter-spacing: 0.1em;
  color: var(--secondary);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: background-color var(--transition), color var(--transition);
  &:hover, &:focus-visible {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
  }
}
.topic-filters__link--active {
  border-color: var(--base-light);
}
.latest-posts__all {
  align-self: flex-start;
  font-size: var(--text-s);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--secondary);
  text-decoration: none;
  padding-block-end: 0.25em;
  border-block-end: 1px solid var(--secondary);
  &:hover {
    color: var(--muted);
  }
}
.topics {
  background-color: var(--base-ultra-light);
}
.topics__container {
  display: grid;
  gap: var(--space-xxl);
  align-items: start;
  @media (min-width: 64em) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  }
}
.topics__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.topics__text {
  padding-block-start: var(--space-s);
  max-inline-size: 30em;
}
.topics__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--secondary);
  counter-reset: topic;
}
.topics__item {
  border-block-end: 1px solid var(--base-light);
}
.topics__link {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding-block: var(--space-m);
  color: var(--secondary);
  text-decoration: none;
  counter-increment: topic;
  &::before {
    content: counter(topic, decimal-leading-zero);
    inline-size: 3em;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--text-s);
    font-weight: 400;
    color: var(--muted);
  }
}
.topics__name {
  flex-grow: 1;
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.topics__count {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--muted);
  text-align: end;
}
.topics__arrow {
  inline-size: 2em;
  flex-shrink: 0;
  font-size: var(--text-l);
  text-align: end;
  transition: transform 0.2s ease;
  .topics__link:hover & {
    transform: translateX(0.25em);
  }
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}
.about-teaser__container {
  display: grid;
  gap: var(--space-xxl);
  align-items: center;
  @media (min-width: 64em) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
.about-teaser__portrait {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--radius);
}
.about-teaser__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.about-teaser__title {
  font-size: var(--h2);
  line-height: 1.3;
}
.about-teaser__text {
  max-inline-size: 36em;
}
.about-teaser__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-l) var(--space-xxl);
  list-style: none;
  margin: 0;
  padding: var(--space-m) 0 0;
  border-block-start: 1px solid var(--base-light);
}
.about-teaser__fact {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.about-teaser__fact-value {
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--secondary);
}
.about-teaser__fact-label {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--muted);
}
.article-hero {
  padding-block-end: 0;
}
.article-hero__container {
  max-inline-size: 1200px;
  align-items: center;
  gap: var(--space-s);
  text-align: center;
}
.article-hero__title {
  font-size: clamp(var(--h2), 4vw, 3.55rem);
  line-height: 1.15;
}
.article-hero__lede {
  max-inline-size: 36em;
  font-size: var(--text-l);
  color: color-mix(in oklch, var(--text) 80%, transparent);
}
.article-hero__meta {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--muted);
}
.article-body__container {
  max-inline-size: 48rem;
}
.article-content {
  display: grid;
  grid-template-columns: [full-start] minmax(0, 1fr) [content-start] min(720px, 100%) [content-end] minmax(0, 1fr) [full-end];
  row-gap: var(--space-m);
  inline-size: 100%;
  & > * { grid-column: content; margin: 0; }
  & > :is(figure, .article-embed) { grid-column: full; justify-self: center; inline-size: min(1000px, 100%); }
  & > figure img { margin-inline: auto; }
  & h2 { font-size: var(--h3); margin-block-start: var(--space-m); }
  & h3 { font-size: var(--h4); margin-block-start: var(--space-s); }
  & h4 { font-size: var(--text-l); }
  & :is(p, li) { max-inline-size: 70ch; }
  & :is(ul, ol) { display: flex; flex-direction: column; gap: 0.4em; padding-inline-start: 1.25em; }
  & a:not(.btn) { color: var(--secondary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
  & a:not(.btn):hover { color: var(--muted); }
  & img { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--base-light); border-radius: var(--radius); }
  & figcaption { margin-block-start: var(--space-xs); font-size: var(--text-s); color: var(--muted); }
  & :not(pre) > code { padding: 0.1em 0.35em; font-size: 0.9em; font-weight: 400; background-color: var(--base-ultra-light); border-radius: 4px; }
  & blockquote { margin: 0; padding-inline-start: var(--space-m); border-inline-start: 3px solid var(--primary); font-style: italic; }
  & table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
  & :is(th, td) { padding: 0.5em; border: 1px solid var(--base-light); text-align: start; vertical-align: top; }
}
.article-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  inline-size: min(720px, 100%);
  margin-block-start: var(--space-l);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--base-light);
}
.page-hero {
  background-color: var(--base-ultra-light);
}
.page-hero__container {
  gap: var(--space-s);
}
.page-hero__title {
  font-size: var(--display);
  line-height: 1.09;
  letter-spacing: -0.01em;
}
.article-list__container {
  gap: var(--space-l);
}
.page-hero__lead {
  max-inline-size: 40em;
  font-size: var(--text-l);
}
.about-intro__container {
  display: grid;
  gap: var(--space-xxl);
  align-items: start;
  @media (min-width: 64em) {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
}
.about-intro__portrait {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 35%;
  border-radius: var(--radius);
}
.about-intro__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  max-inline-size: 38em;
}
.values {
  background-color: var(--base-ultra-light);
}
.values__container {
  gap: var(--space-xl);
}
.values__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.values__list {
  display: grid;
  gap: var(--space-l);
  list-style: none;
  margin: 0;
  padding: 0;
  @media (min-width: 48em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  @media (min-width: 64em) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.values__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  background-color: var(--white);
  border-radius: var(--radius);
}
.values__number {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  font-weight: 400;
  color: var(--muted);
}
.values__title {
  font-size: var(--h4);
}
.say-hi__container {
  display: grid;
  gap: var(--space-xl);
  align-items: end;
  @media (min-width: 64em) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}
.say-hi__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.say-hi__title {
  font-size: var(--h1);
}
.say-hi__studio {
  font-weight: 700;
  color: var(--secondary);
}
.say-hi__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-l);
}
.contact__container {
  display: grid;
  gap: var(--space-xl);
  @media (min-width: 64em) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.contact__method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-l);
  background-color: var(--base-ultra-light);
  border-radius: var(--radius);
}
.contact__email {
  font-family: var(--font-heading);
  font-size: var(--h3);
  font-weight: 400;
  color: var(--secondary);
  overflow-wrap: anywhere;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.contact__note {
  max-inline-size: 30em;
}
.contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  @media (min-width: 64em) {
    grid-column: 1 / -1;
  }
}
.legal__container {
  max-inline-size: 48rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  min-inline-size: 0;
  & > * { margin: 0; }
  & h2 { font-size: var(--h3); margin-block-start: var(--space-m); }
  & h3 { font-size: var(--h4); margin-block-start: var(--space-s); }
  & h4 { font-size: var(--text-l); }
  & :is(p, li) { max-inline-size: 70ch; }
  & :is(ul, ol) { display: flex; flex-direction: column; gap: 0.4em; padding-inline-start: 1.25em; }
  & a:not(.btn) { color: var(--secondary); text-decoration-thickness: 1px; text-underline-offset: 0.2em; overflow-wrap: anywhere; }
  & a:not(.btn):hover { color: var(--muted); }
  & img { display: block; max-inline-size: 100%; block-size: auto; border: 1px solid var(--base-light); border-radius: var(--radius); }
  & figcaption { margin-block-start: var(--space-xs); font-size: var(--text-s); color: var(--muted); }
  & :not(pre) > code { padding: 0.1em 0.35em; font-size: 0.9em; font-weight: 400; background-color: var(--base-ultra-light); border-radius: 4px; }
  & blockquote { margin: 0; padding-inline-start: var(--space-m); border-inline-start: 3px solid var(--primary); font-style: italic; }
  & table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-s); }
  & :is(th, td) { padding: 0.5em; border: 1px solid var(--base-light); text-align: start; vertical-align: top; }
}
.article-code {
  margin: 0;
  padding: 30px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  white-space: pre;
  color: #ebdbb2;
  background-color: #282828;
  border-block: 10px solid #d9d9d9;
  border-radius: 3px;
  & code { padding: 0; font-size: inherit; color: inherit; background: none; }
}
.article-embed {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--radius);
}
.article-embed--tall {
  aspect-ratio: auto;
  block-size: 533px;
  border: 1px solid var(--base-light);
}
.article-embed--codepen {
  aspect-ratio: auto;
  block-size: var(--embed-height, 400px);
}
.site-header__close {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  &:focus-visible {
    position: static;
    inline-size: auto;
    block-size: auto;
    clip-path: none;
    align-self: flex-end;
    padding: 0.5em 1em;
    font: inherit;
    font-size: var(--text-xs);
    color: var(--secondary);
    background: none;
    border: 1px solid var(--base-light);
    outline: 2px solid var(--secondary);
  }
  @media (min-width: 64em) {
    display: none;
  }
}
.site-footer__cookie-button {
  padding: 0;
  font: inherit;
  font-size: var(--text-xs);
  background: none;
  border: 0;
  cursor: pointer;
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s) var(--space-l);
  inline-size: 100%;
  margin-block-start: var(--space-s);
  padding-block-start: var(--space-s);
  border-block-start: 1px solid var(--base-light);
  text-align: start;
}
.article-meta__details {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 2em;
}
.article-meta__item {
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.article-meta__category {
  padding: 0.35em 0.75em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--secondary);
  border: 1px solid var(--base-light);
  border-radius: var(--radius);
  &:hover {
    color: var(--white);
    background-color: var(--secondary);
    border-color: var(--secondary);
  }
}
.article-end__category {
  padding: 0.15em 0.65em;
  font-size: var(--text-xs);
  color: var(--text);
  text-decoration: none;
  background-color: var(--base-ultra-light);
  border-radius: var(--radius);
  &:hover { background-color: var(--primary); }
}
.article-share {
  display: flex;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}
.article-share__link {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--secondary);
  text-decoration: none;
  &:hover { color: var(--muted); }
}
.post-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-m);
  inline-size: min(720px, 100%);
  margin-block-start: var(--space-m);
}
.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
  max-inline-size: 48%;
  color: var(--secondary);
  text-decoration: none;
  &:hover .post-nav__title { text-decoration: underline; }
}
.post-nav__label {
  font-weight: 700;
}
.post-nav__title {
  font-size: var(--text-s);
  color: var(--muted);
  text-underline-offset: 0.2em;
}
.post-nav__link--next {
  margin-inline-start: auto;
  text-align: end;
}
.post-card[hidden] {
  display: none;
}
.article-search {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  max-inline-size: 40rem;
}
.article-search__icon {
  --empty-element-size: 0;
  position: absolute;
  inset-block-start: 0.85em;
  inset-inline-start: 1em;
  color: var(--muted);
  pointer-events: none;
}
.article-search__input {
  flex: 1 1 18rem;
  min-block-size: 3rem;
  padding: 0.6em 1em 0.6em 2.75em;
  font: inherit;
  font-size: var(--text-s);
  color: var(--secondary);
  background-color: var(--white);
  border: 1px solid var(--base-light);
  border-radius: var(--radius);
  &:focus-visible {
    outline: 2px solid var(--secondary);
    outline-offset: 2px;
    border-color: var(--secondary);
  }
  &::placeholder {
    color: var(--muted);
  }
}
.article-search__status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}
.article-search__empty {
  padding: var(--space-m);
  color: var(--muted);
  background-color: var(--base-ultra-light);
  border-radius: var(--radius);
}
.site-header__burger {
  display: grid;
  gap: 5px;
  inline-size: 24px;
}
.site-header__bar {
  --empty-element-size: 0;
  display: block;
  block-size: 2px;
  background-color: currentColor;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
  .site-header:has(.site-header__nav:popover-open) &:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .site-header:has(.site-header__nav:popover-open) &:nth-child(2) {
    opacity: 0;
  }
  .site-header:has(.site-header__nav:popover-open) &:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }
}