: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;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.site-header {
  padding-block: var(--space-s);
border-bottom: 1px solid color-mix(in oklch, var(--secondary) 70%, transparent);
}
.site-header__inner {
  display: grid;
gap: var(--space-xs);
}
.site-header__ref {
  margin: 0;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-weight: 400;
font-size: 0.8125rem;
letter-spacing: 0.08em;
color: var(--text-dark-muted);
}
.site-header__bar {
  display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s) var(--space-l);
}
.site-header__brand {
  font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 1.375rem;
line-height: 1.1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--primary);
text-decoration: none;
}
.site-header__nav {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-s) var(--space-m);
}
.site-header__link {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-dark);
text-decoration: none;
text-underline-offset: 0.25em;
transition: color 150ms ease-out;

&:hover { text-decoration: underline; color: var(--primary); }
&:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
}
.site-header__cta {
  min-width: 0;
&.btn--primary { font-size: 0.9375rem; padding-block: 0.6em; padding-inline: 1.25em; }
}
.site-footer {
  padding-block: var(--space-l);
border-top: 1px solid color-mix(in oklch, var(--text-light) 35%, transparent);
}
.site-footer__inner {
  display: grid;
gap: var(--space-m);
}
.site-footer__id {
  display: grid;
justify-items: start;
}
.site-footer__name {
  margin: 0;
font-family: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 1.125rem;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.site-footer__person {
  margin: 0;
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-size: 0.8125rem;
letter-spacing: 0.08em;
}
.site-footer__nav {
  display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-m);
}
.site-footer__link {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
font-weight: 600;
font-size: 0.9375rem;
color: var(--text-light);
text-decoration: underline;
text-underline-offset: 0.25em;
transition: color 150ms ease-out;

&:hover { color: var(--text-light-muted); }
&:focus-visible { outline: 2px solid var(--text-light); outline-offset: 3px; }
}
.site-header__logo {
  display: block;
height: 3.75rem;
width: auto;
max-width: 100%;
margin-inline-start: -0.69rem;
& img, & picture { display: block; height: 3.75rem; width: auto; max-width: 100%; }
}
.site-footer__brand {
  display: inline-block;
margin-block-end: var(--space-xs);
}
.site-footer__logo {
  display: block;
height: 3.25rem;
width: auto;
max-width: 100%;
margin-inline-start: -0.6rem;
& img, & picture { display: block; height: 3.25rem; width: auto; max-width: 100%; }
}
.site-footer__legal {
  display: flex;
flex-wrap: wrap;
gap: var(--space-xs) var(--space-m);
padding-block-start: var(--space-s);
border-top: 1px solid color-mix(in oklch, var(--text-light) 35%, transparent);
}
.site-footer__legal-link {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
font-weight: 400;
font-size: 0.8125rem;
color: var(--text-light);
text-decoration: underline;
text-underline-offset: 0.25em;
transition: color 150ms ease-out;

&:hover { color: var(--text-light-muted); }
&:focus-visible { outline: 2px solid var(--text-light); outline-offset: 3px; }
}
.site-footer__top {
  display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-s) var(--space-l);
}