: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 {
  ;
;
;
;
;
;
;
;
;
;
;
;
;
;
;
--black-trans-20: rgba(0,0,0,.2);
--white-trans-20: rgba(255,255,255,.2);
--neutral-ultra-light: #eff3f5;
--neutral-light: #d0dbe1;
--black-trans-10: rgba(0,0,0,.1);
--black-trans-30: rgba(0,0,0,.3);
--neutral-dark: #32434e;
--neutral-trans-60: rgba(0,0,0,.6);
--neutral: #000;
--neutral-trans-80: rgba(0,0,0,.8);
--neutral-semi-light: #92abb9;
--accent: #813251;
--accent-ultra-light: #f8edf1;
--primary-h: 198;
--primary-s: 64%;
--primary-l: 34%;
--neutral-ultra-dark: #141b1f;
}
: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;
}
.mg-hero {
  background: linear-gradient(135deg, var(--body-bg-color) 0%, var(--base-ultra-light) 100%);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 50%), radial-gradient(circle at 70% 80%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 50%);
    pointer-events: none;
  }
}
.mg-hero__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
  grid-template-columns: 1fr;
  position: relative;
  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size >= 62rem) {
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-xl);
  }
}
.mg-hero__content-wrapper {
  color: var(--neutral-dark);
}
.mg-hero__title {
  font-size: calc(var(--h1) * 1.3333333);
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--base) 0%, var(--primary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.mg-divider--accent {
  &::after {
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    margin: var(--space-xs) 0;
    background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
    border-radius: var(--radius);
  }

  &.mg-divider--centered::after {
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
  }

  &.mg-divider--short::after {
    width: 4rem;
    height: 0.25rem;
    background: linear-gradient(90deg, var(--primary), transparent);
    margin-bottom: var(--space-xs);
  }
}
.mg-lead {
  font-size: var(--text-l);
    line-height: 1.625;
    color: var(--neutral-dark);
}
.mg-hero__benefits {
  font-size: var(--text-l);
  line-height: 1.625;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);

  & li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all 200ms ease;
    border-radius: var(--radius);
  }

  & svg {
    width: 24px;
    height: 24px;
    color: var(--primary);
  }
}
.mg-hero__subtitle {
  font-size: var(--text-l);
  font-weight: 500;
}
.mg-hero__actions {
  flex-direction: row;
  gap: var(--space-m);
  flex-wrap: wrap;
  margin-top: var(--space-m);
}
.mg-hero__image-wrapper {
  text-align: center;
  position: relative;
  perspective: 1000px;

  &::before {
    content: '';
    position: absolute;
    top: -1rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% + 2rem);
    height: calc(100% + 2rem);
    background: linear-gradient(135deg, var(--primary) 0%, var(--base) 100%);
    border-radius: 1rem;
    z-index: -1;
    opacity: 0.1;
    transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 10%, transparent) 0%, color-mix(in srgb, var(--primary) 10%, transparent) 100%);
    border-radius: 1.5rem;
    transform: rotate(10deg);
    z-index: -1;
    transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  &:hover {
    &::before {
      transform: translateX(-50%) scale(1.1);
      opacity: 0.15;
    }

    &::after {
      transform: translate(0.5rem, -0.5rem) rotate(5deg) scale(1.05);
    }

    .mg-hero__image {
      transform: translateY(-1rem) rotate(1deg);
      box-shadow:
        0 25px 50px -12px var(--black-trans-30),
        0 30px 60px -10px color-mix(in srgb, var(--primary) 20%, transparent);
    }
  }
}
.mg-hero__image {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  border: 0.25rem solid var(--primary);
  box-shadow:
    0 10px 25px -5px var(--black-trans-10),
    0 20px 40px -10px color-mix(in srgb, var(--primary) 20%, transparent);
  transition: all 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: rotate(-1deg);
}
.bg--base-ultra-light {
  background-color: var(--base-ultra-light);
}
.mg-section--pattern {
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle at 25% 25%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%),
                      radial-gradient(circle at 75% 75%, color-mix(in srgb, var(--accent) 10%, transparent) 0%, transparent 50%);
    pointer-events: none;
  }
}
.mg-about__grid {
  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size >= 62rem) {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr)
  }
}
.mg-about__image {
  border-radius: 1rem;
  border: 0.25rem solid var(--primary);
  box-shadow:
    0 10px 25px -5px hsla(0,0%,0%,0.1),
    0 20px 40px -10px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
  transition: all 300ms ease;
  max-width: 80%;
  margin: 0 auto;

  &:hover {
    transform: translateY(-0.5rem) rotate(-2deg);
    box-shadow:
      0 20px 40px -5px hsla(0,0%,0%,0.1),
      0 30px 60px -10px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.2);
  }
}
.intro-two-col {
  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size >= 62rem) {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--content-gap);
    align-items: center;
  }
}
.intro-two-col__cta-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.insight-grid {
  display: grid;
  grid-template-columns: var(--grid-1);
  gap: var(--grid-gap);
  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size >= 62rem) {
    grid-template-columns: var(--grid-3);
  }
}
.mg-card {
  background-color: var(--white);
  border: 1px solid var(--base-light);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  overflow: hidden;
  transition: all 200ms cubic-bezier(0, 0, 0.2, 1);
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;

  &:hover {
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    transform: translateY(-2px);

    .card__media-wrapper img {
      transform: scale(1.05);
    }
  }
}
.mg-card--accent {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 4px;
    background: var(--primary);
    border-radius: 0 0 var(--radius) 0;
  }
}
.mg-card__media-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
}
.mg-card__content-wrapper {
  padding: var(--space-m);
  flex: 1;
}
.mg-card__meta {
  color: var(--text-dark-muted);
    font-size: var(--text-xs);
}
.mg-card__tags {
  order: -1;
  display: flex;
  gap: var(--space-xs);
  flex-wrap: wrap;

  .mg-card__tags--above {
    margin-bottom: var(--space-xs);
  }

  .mg-card__tags--below {
    margin-bottom: var(--space-s);
  }
}
.mg-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  background-color: var(--base-hover);
  color: var(--neutral-ultra-dark);
  font-size: var(--text-s);
  font-weight: 500;
  border-radius: var(--radius-circle);
  border: 1px solid var(--base-light);
}
.mg-tag--primary {
  background-color: var(--base-ultra-light);
  color: var(--base);
  border-color: var(--base-dark);
}
.mg-card__footer-wrapper {
  padding: var(--space-m);
  background-color: var(--base-ultra-light);
  border-top: 1px solid var(--base-light);
}
.projects-grid {
  display: grid;
  grid-template-columns: var(--grid-1);
  gap: var(--grid-gap);
  :has(> &) {
    container-type: inline-size;
  }
  @container (inline-size >= 62rem) {
    grid-template-columns: var(--grid-3);
  }
}
.mg-cta {
  background: linear-gradient(135deg, var(--primary-ultra-dark) 0%, var(--primary-dark) 100%);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.mg-cta__content-wrapper {
  align-items: center;
  text-align: center;

  & > * {
    max-width: var(--width-60);
  }

  & p {
    color: var(--white);
  }
}
.mg-section__header {
  text-align: center;
  max-width: var(--width-60);
  margin: 0 auto;
}
.mg-divider--centered {
  &::after {
    background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%);
  }
}
.mg-cta__form {
  text-align: left;
  width: 100%;
}
.site-header {
  padding: var(--space-m) var(--gutter);
border-block-end: 0.0625rem solid var(--base-light);
background: var(--white);
color: var(--base);
}
.site-header__inner {
  flex-direction:row;
max-inline-size: var(--content-width);
margin-inline: auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:var(--space-m);
@media (width < 40em) {
flex-wrap:wrap;
gap:var(--space-s);
}
}
.logo-wrapper {
  display: flex;
    column-gap: var(--space-xs);
    align-items: center;
    position: relative;
}
.logo {
  width: 8rem;
    aspect-ratio: 1 / 1;
    border: 3px solid var(--primary);
    border-radius: 50%;
}
.logo-wrapper__job-title {
  font-size: var(--text-s);
}
.etch-nav {
  /* Nav */
--nav-background-color: #transparent;
--nav-mobile-background-color: #fff;
--nav-foreground-color: #000;
--nav-z-index: 99;

/* Nav List */
--nav-list-style: none;
--nav-list-padding: 0;
--nav-list-margin: 0;

/* Nav Items */
--nav-item-block-padding: 0.5rem;
--nav-item-inline-padding: 1rem;
--nav-item-padding: var(--nav-item-block-padding) var(--nav-item-inline-padding);
--nav-item-focus-line: 2px;
--nav-item-focus-outline-color: var(--nav-foreground-color);
--transition-duration: 0.3s;
--transition-timing-function: ease-in-out;
--nav-item-icon-rotation: 180deg;

/* Current active page */
--nav-item-current-active-decoration: underline;
--nav-item-current-active-offset: 5px;

/* Nav Button Icons */
--nav-button-icon-size: 20px;

/* Nav Links */
--nav-link-padding: 0.5em 1em;
--nav-link-color: var(--nav-foreground-color);
--nav-link-color-contrast: var(--nav-background-color);
--nav-link-color-hover: var(--primary, #444);
--nav-link-background-hover: transparent;

/* Nav Dropdowns and flyouts */
--nav-dropdown-background: #fff;
--nav-flyout-background: #fff;
--nav-flyout-icon-desktop-initial-angle: -90deg;
--nav-flyout-icon-desktop-rotation: 90deg;

/* Set header to relative */
header:has(&) {
	position: relative;
}

background-color: var(--nav-background-color);
display: none;

&[aria-expanded='true'] {
	--nav-background-color: var(--nav-mobile-background-color);
	display: flex;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--nav-z-index);
}

:where(.etch-nav__list) {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: var(--nav-list-margin);
	padding: var(--nav-list-padding);
	list-style: var(--nav-list-style);
}

:where(.etch-nav__list, .etch-nav__dropdown, .etch-nav__flyout) {
	margin: var(--nav-list-margin);
	padding: var(--nav-list-padding);
	list-style: var(--nav-list-style);
}

:where(.etch-nav__item) {
	display: flex;
	flex-direction: column;
}

:where(
	.etch-nav__link:focus,
	.etch-nav__link:focus-visible,
	.etch-nav__button:focus,
	.etch-nav__button:focus-visible
) {
	outline: var(--nav-item-focus-line) solid
		var(--nav-item-focus-outline-color);
}

:where(.etch-nav__item .etch-nav__link, .etch-nav__item .etch-nav__button) {
	text-decoration: none;
	color: var(--nav-link-color);
	padding: var(--nav-item-padding);
}

:where(
	.etch-nav__link[aria-current='page'],
	.etch-nav__button[aria-current='page']
) {
	text-decoration: var(--nav-item-current-active-decoration);
	text-underline-offset: var(--nav-item-current-active-offset);
}

:where(.etch-nav__button) {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--nav-link-color);

	svg {
		width: var(--nav-button-icon-size);
		min-width: var(
			--nav-button-icon-size
		); /* There seems to be some issue with etch.reset and max-width 100%*/
		height: var(--nav-button-icon-size);
		transition: transform var(--transition-duration)
			var(--transition-timing-function);
	}
}

:where(
	.etch-nav__button--dropdown-toggle[aria-expanded='true'] svg,
	.etch-nav__button--flyout-toggle[aria-expanded='true'] svg
) {
	transform: rotate(var(--nav-item-icon-rotation));
}

:where(
	.etch-nav__item:hover > .etch-nav__link,
	.etch-nav__item:hover > .etch-nav__button[aria-expanded='true']
) {
	color: var(--nav-link-color-hover);
	background-color: var(--nav-link-background-hover);
}

:where(.etch-nav__item--has-dropdown, .etch-nav__item--has-flyout) {
	position: relative;
}

:where(.etch-nav__dropdown) {
	position: relative;
	background-color: var(--nav-dropdown-background);
	transition:
		max-height calc(var(--transition-duration) / 2)
			var(--transition-timing-function),
		opacity var(--transition-duration) var(--transition-timing-function),
		visibility var(--transition-duration)
			var(--transition-timing-function);
}

:where(
	.etch-nav__button--dropdown-toggle[aria-expanded='false']
		~ .etch-nav__dropdown,
	.etch-nav__button--flyout-toggle[aria-expanded='false']
		~ .etch-nav__flyout
) {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition:
		max-height var(--transition-duration)
			var(--transition-timing-function),
		opacity var(--transition-duration) var(--transition-timing-function),
		visibility var(--transition-duration)
			var(--transition-timing-function);
}

:where(.etch-nav__flyout) {
	background-color: var(--nav-flyout-background);
	transition:
		max-height calc(var(--transition-duration) / 2)
			var(--transition-timing-function),
		opacity var(--transition-duration) var(--transition-timing-function),
		visibility var(--transition-duration)
			var(--transition-timing-function);
}

@media (min-width: 768px) {
	display: flex;

	:where(.etch-nav__item) {
		text-wrap: nowrap;
	}

	:where(.etch-nav__list) {
		flex-direction: row;
	}

	:where(.etch-nav__button:nth-child(2)) {
		padding-inline: 0 var(--nav-item-inline-padding);
	}

	:where(.etch-nav__dropdown) {
		position: absolute;
		top: 100%;
		left: 0;
		overflow: inherit;
		max-height: 0; /* desktop flicker fix */
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	}

	:where(.etch-nav__button--flyout-toggle svg) {
		transform: rotate(var(--nav-flyout-icon-desktop-initial-angle));
	}

	:where(.etch-nav__button--flyout-toggle[aria-expanded='true'] svg) {
		transform: rotate(var(--nav-flyout-icon-desktop-rotation));
	}

	:where(.etch-nav__flyout) {
		position: absolute;
		top: 0;
		left: 100%;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	}
}
}
.etch-burger {
  --hamburger-size: 20px;
	--burger-dark-color: #242424;
	--burger-lines-size: 100%;
	--transition-duration: 0.3s;
	--transition-timing-function: ease-in-out;

	inline-size: calc(var(--hamburger-size) + var(--hamburger-size) / 5);
	block-size: var(--hamburger-size);
	flex-direction: column;
	justify-content: space-between;
	padding: 0;
	cursor: pointer;

	display: flex;

	/* Hide Burger above X breakpoint */
	@media (min-width: 768px) {
		display: none;
	}

	span {
		display: flex;
		height: 2px;
		background: var(--burger-dark-color);
		min-height: 0;
		max-inline-size: var(--burger-lines-size);
		inline-size: var(--burger-lines-size);
		min-inline-size: 0;
		transition:
			transform var(--transition-duration)
				var(--transition-timing-function),
			opacity var(--transition-duration) var(--transition-timing-function),
			background var(--transition-duration)
				var(--transition-timing-function);
	}

	&[aria-expanded='true'] span:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}

	&[aria-expanded='true'] span:nth-child(2) {
		opacity: 0;
	}

	&[aria-expanded='true'] span:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}
}
.site-footer {
  padding:var(--space-l) var(--gutter);
background:var(--white);
font-size:var(--text-xs);
}
.site-footer__inner {
  flex-direction:row;
color:var(--text-dark-muted);
max-inline-size:var(--content-width);
margin-inline:auto;
display:flex;
justify-content:space-between;
gap:var(--space-m);
@media(width < 40em) {
flex-direction:column;
}
}
.footer__left {
  gap: var(--content-gap);
  display: flex;
  flex-direction: column;
}
.legal-container {
  display: flex;
  gap: var(--space-xs);

  & a {
    color: var(--white);
  }

  & a:hover {
      color: var(--base-semi-light);
    }
flex-wrap: wrap;
align-items: center;
}
.legal-container__link {
  color: var(--white);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.2;

	&:hover,
	&:focus-visible {
		color: var(--base-semi-light);
	}
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
border-radius: 999px;
background-color: transparent;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.legal-container__icon {
  inline-size: 1.125rem;
	block-size: 1.125rem;
}
.contact-form__field {
  margin-block-end: var(--contact-field-gap);
}
.contact-form__label {
  display: inline-block; margin-block-end: 0.3125rem; position: relative;
      & label { display: inline-block; font-weight: 500; }
      &[data-required="true"] label::after { content: " *"; color: #f56c6c; margin-inline-start: 0.1875rem; }
}
.contact-form__control {
  display: block; inline-size: 100%; max-inline-size: 100%; background-color: var(--white); color: var(--contact-control-text);
      border: 1px solid var(--contact-control-border); border-radius: var(--contact-control-radius); padding: 0.6875rem 0.9375rem;
      font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; font-size: var(--text-m); line-height: 1;
      transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
      &::placeholder { color: #868e96; opacity: 1; }
      &:focus { border-color: #1a7efb; color: var(--contact-control-text); background-color: var(--white); }
      &:is(textarea) { min-block-size: 5.625rem; }
}
.contact-form {
  --contact-field-gap: 1.25rem; --contact-control-border: #dadbdd; --contact-control-radius: 0.4375rem; --contact-control-text: #606266;
}
.contact-form__conditional {
  &[hidden] { display: none; }
}
.contact-form__notice {
  margin-block-end: var(--contact-field-gap); background-color: var(--accent); color: var(--accent-ultra-light); padding: var(--space-s);
}
.contact-form__name-fields {
  @media (min-width: 48rem) { display: grid; grid-template-columns: var(--grid-2); gap: 0.9375rem; }
}
.contact-form__consent-label {
  display: flex; align-items: flex-start; gap: 0.3125rem; cursor: pointer; & a { display: inline; color: var(--primary-semi-light); }
}
.contact-form__checkbox {
  --empty-element-size: 0; flex: 0 0 auto; inline-size: 0.8125rem; block-size: 0.8125rem; margin-block-start: 0.375rem;
}
.contact-form__status {
  
    --notice-accent: var(--info);
    --notice-background: var(--info-ultra-light);
    padding: var(--space-m);
    margin-block-end: var(--space-m);
    background-color: var(--notice-background);
    color: var(--text-dark);
    border: var(--border);
    border-inline-start: 0.25rem solid var(--notice-accent);
    border-radius: var(--radius);
    font-weight: 600;
    white-space: pre-line;
    &[data-state="success"] {
      --notice-accent: var(--success);
      --notice-background: var(--success-ultra-light);
    }
    &[data-state="warning"] {
      --notice-accent: var(--warning);
      --notice-background: var(--warning-ultra-light);
    }
    &[data-state="error"] {
      --notice-accent: var(--danger);
      --notice-background: var(--danger-ultra-light);
    }
    &:focus-visible {
      outline: 0.125rem solid var(--notice-accent);
      outline-offset: 0.25rem;
    }
  
}
html:root {
  --text-font-family: 'MG Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--heading-font-family: 'MG Work Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
--code-font-family: 'MG JetBrains Mono', monospace;
}
.mg-card__media-wrapper--logo {
  aspect-ratio: unset;
  height: 60px;
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--base);

  img {
    width: auto;
    height: 40px;
    max-width: 200px;
    object-fit: contain;
    object-position: left;
  }
article[data-card-title="Etch"] & img { filter: brightness(0) invert(1); }
}
.posts-list {
  --posts-list-spacing: 3em;
    flex-direction: column;
    row-gap: var(--posts-list-spacing);
    padding-left: 0;
}
.mg-two-col-card {
  --card-two-col-spacing: 3em;

  position: relative;
  display: grid;
  grid-template-rows: var(--grid-1);
  grid-template-columns: var(--grid-2-1);
  row-gap: var(--fr-card-gap);
  column-gap: var(--fr-card-gap);
  align-items: initial;
  align-items: center;
  grid-gap: var(--grid-gap);
}
.mg-two-col-card:not(:last-child)::after {
  content: '';
  position: absolute;
  width: 100%;
  bottom: calc(var(--card-two-col-spacing) / 2 * -1);
  left: 0;
  height: 1px;
  background-color: var(--base-light);
}
.mg-two-col-card__content-wrapper {
  flex-direction: column;
  row-gap: .75em;
  transition: var(--transition);
}
.mg-two-col-card__tags {
  font-size: var(--text-s);
  line-height: 1;
}
.mg-two-col-card__tag {
  color: var(--base);
}
.mg-two-col-card__date {
  line-height: 1;
  font-size: var(--text-s);
}
.mg-two-col-card__footer {
  transition: var(--transition);
  align-items: flex-end;
}
.mg-two-col-card__read-more {
  &::after {
    content: "→";
    margin-left: .5em;
  }
}
.constrained-section {
  --article-width: 60ch;

   div[data-etch-element='container'] {
    width: 100%;
    max-width: var(--article-width);
  }
}
.blog-post__date {
  font-size: var(--text-xs);
  order: -1;
}
.blog-post__caption {
  font-size: var(--text-xs);
}
.blog-post__comment-link {
  font-size: var(--text-s);
  display: flex;
  align-items: center;
  gap: 0.25em;
}
.blog-post__body {
  
& sup a { display: inline; }
& .wp-block-footnotes { list-style-type: decimal; padding: revert; }
& .wp-block-list { list-style: revert; padding: revert; }
overflow-wrap: anywhere;
& .wp-block-table { overflow: auto; }
& .wp-block-table table { border-collapse: collapse; inline-size: 100%; }
& .wp-block-table .has-fixed-layout { table-layout: fixed; }
& .wp-block-table :is(td, th) { border: 1px solid; padding: 0.5em; overflow-wrap: anywhere; }
& .wp-block-table thead { border-block-end: 3px solid; }
& .wp-block-separator { border: 0; border-block-start: 2px solid; }
& .wp-block-quote { overflow-wrap: anywhere; }
& .wp-block-quote > cite { display: block; color: var(--blockquote-cite-color); font-size: var(--blockquote-cite-font-size); font-style: var(--blockquote-cite-font-style); font-weight: var(--blockquote-cite-font-weight); line-height: var(--blockquote-cite-line-height); text-transform: uppercase; }

}
.comment-section__heading {
  font-size: var(--h2);
}
.newsletter-form__status {
  
    --notice-accent: var(--info);
    --notice-background: var(--info-ultra-light);
    padding: var(--space-m);
    margin-block-end: var(--space-m);
    background-color: var(--notice-background);
    color: var(--text-dark);
    border: var(--border);
    border-inline-start: 0.25rem solid var(--notice-accent);
    border-radius: var(--radius);
    font-weight: 600;
    &[data-state="warning"] {
      --notice-accent: var(--warning);
      --notice-background: var(--warning-ultra-light);
    }
    &[data-state="error"] {
      --notice-accent: var(--danger);
      --notice-background: var(--danger-ultra-light);
    }
    &:focus-visible {
      outline: 0.125rem solid var(--notice-accent);
      outline-offset: 0.25rem;
    }
  
}
.contact-form__newsletter-hint {
  
    margin-block-start: var(--space-xs);
    font-size: var(--text-s);
    color: inherit;
  
}
.product-mark {
  --product-logo-width:100%;
container-type:inline-size;
inline-size:100%;
max-inline-size:var(--width-20);
display:flex;
align-items:center;
column-gap:4%;
white-space:nowrap;
&[data-platform="WP"], &[data-platform="Studio"] {
--product-logo-width:58%;
}
&[data-context="card"] {
--product-logo-filter:brightness(0);
--product-logo-height:var(--space-m);
block-size:calc(var(--space-l) + var(--space-s));
align-self:start;
color:var(--base);
&[data-brand="acss"] {
--product-logo-filter:grayscale(1) invert(1) contrast(2);
}
&[data-brand="frames"] {
--product-logo-height:var(--space-l);
}
}
&[data-context="ticker"] {
color:var(--white);
&[data-platform="WP"], &[data-platform="Studio"] {
--product-logo-filter:brightness(0) invert(1);
}
}
}
.product-mark__image {
  display:block;
flex-shrink:0;
inline-size:var(--product-logo-width);
block-size:var(--product-logo-height,var(--space-xl));
object-fit:contain;
background:var(--product-logo-bg,transparent);
padding:var(--product-logo-padding,0);
filter:var(--product-logo-filter,none);
}
.product-mark__platform {
  font-family:var(--heading-font-family);
font-size:12cqi;
font-weight:500;
line-height:1;
letter-spacing:-.04em;
color:inherit;
}
.photo-frame {
  --photo-frame-offset:var(--space-l);
position:relative; isolation:isolate; display:block; inline-size:100%;
max-inline-size:min(100%,var(--photo-frame-max,100%)); min-inline-size:0;
padding-inline-start:var(--photo-frame-offset); padding-block-end:var(--photo-frame-offset);
&::before {
 content:''; position:absolute; inset-block-start:var(--photo-frame-offset);
 inset-inline-start:0; inset-inline-end:var(--photo-frame-offset); inset-block-end:0;
 background:var(--primary-ultra-light); transform:none; transform-origin:center;
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 &::before { transition:transform 400ms cubic-bezier(.25,.8,.25,1); }
 &:hover::before { transform:rotate(-2deg); }
}
&[data-size="compact"] {
--photo-frame-offset:var(--space-xs); inline-size:var(--space-xl); flex-shrink:0;
}
&[data-size="document"] {
max-inline-size:min(100%,var(--width-50));
}
&[data-size="document"] > img {
object-fit:contain;
aspect-ratio:auto;
padding:var(--document-inset,var(--space-xs));
}
}
.photo-frame__caption {
  position:absolute; z-index:0; inset-inline-start:0;
inset-inline-end:var(--photo-frame-offset); inset-block-start:var(--photo-frame-offset); inset-block-end:0;
color:var(--primary); font-size:var(--text-xs); line-height:1.3; pointer-events:none;
transform:none; transform-origin:center;
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 transition:transform 400ms cubic-bezier(.25,.8,.25,1);
 .photo-frame:hover & { transform:rotate(-2deg); }
}
}
.photo-frame__caption-text {
  position:absolute; inset-inline:0; inset-block-end:0; min-inline-size:0;
block-size:var(--photo-frame-offset); padding-inline:var(--space-s); pointer-events:auto;
display:flex; align-items:center;
}
.letter {
  background:var(--primary-ultra-light);
padding:var(--space-l);
display:flex;
gap:var(--space-l);
align-items:center;
justify-content:space-between;
border-inline-start:0.1875rem solid var(--primary);

@media(width < 55em) {
align-items:start;
flex-direction:column;
}
}
.eyebrow {
  font-family:'MG JetBrains Mono', monospace;
font-size:var(--text-xs);
font-weight:400;
text-transform:uppercase;
letter-spacing:.07em;
display:flex;
align-items:center;
gap:var(--space-xs);
}
.site-nav__link {
  display:inline-block;
padding-block:var(--space-xs);
color:inherit;
white-space:nowrap;
text-decoration-line:underline;
text-decoration-color:transparent;
text-decoration-thickness:0.0625rem;
text-underline-offset:.3em;
&:is(:hover,[aria-current="page"]) {
color:var(--nav-accent,var(--primary));
text-decoration-color:currentColor;
}
&:focus-visible {
outline:0.125rem solid var(--nav-accent,var(--primary));
outline-offset:0.25rem;
text-decoration-color:currentColor;
}
@media(width < 40em) {
&:nth-child(2) {
white-space:normal;
text-align:center;
text-wrap:balance;
}
}
&[data-kind="contact"] {
padding-inline:var(--space-s);
border-radius:var(--radius);
background:var(--nav-button-background,var(--base));
color:var(--nav-button-color,var(--white));
&:is(:hover,[aria-current="page"]) {
background:var(--primary);
color:var(--white);
}
@media(width < 40em) {
padding-inline:var(--space-xs);
}
}
}
.site-nav {
  display:flex;
gap:var(--space-l);
align-items:center;
font-size:var(--text-s);
@media (width < 40em) {
display:grid;
grid-template-columns:auto minmax(0,1fr) auto;
inline-size:100%;
gap:var(--space-xs);
}
}
.wordmark {
  font-family:var(--heading-font-family);
font-size:var(--text-xl);
font-weight:700;
letter-spacing:-.05em;
color:inherit;
text-decoration: none;
}
.wordmark__dot {
  color:var(--primary);
}
.site-footer__links {
  display:flex;
flex-wrap:wrap;
gap:var(--space-m);
}
.writing-row {
  display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-m);
padding-block:var(--space-m);
border-block-start:0.0625rem solid var(--base-light);
@media(width >= 50em) {
grid-template-columns:auto minmax(0,1fr) auto;
}
}
.writing-row__number {
  font-family:'MG JetBrains Mono', monospace;
font-size:var(--text-xs);
color:var(--primary);
padding-block-start:.3em;
}
.writing-row__body {
  display:grid;
gap:var(--space-xs);
}
.writing-row__excerpt {
  color:var(--text-dark-muted);
font-size:var(--text-s);
}
.writing-row__end {
  display:flex;
gap:var(--space-l);
align-items:center;
font-size:var(--text-xs);
@media(width < 50em) {
grid-column:2;
justify-content:space-between;
}
}
.essay-row {
  display:grid;
grid-template-columns:auto minmax(0,1fr);
gap:var(--space-m);
padding-block:var(--space-l);
border-block-start:0.0625rem solid var(--base-light);
@media(width >= 55em) {
grid-template-columns:auto minmax(0,1fr) auto;
}
}
.essay-row__number {
  font-size:var(--text-xs);
font-family:'MG JetBrains Mono', monospace;
color:var(--primary);
padding-block-start:.3em;
}
.essay-row__copy {
  display:grid;
gap:var(--space-s);
}
.essay-row__meta {
  display:flex;
flex-wrap:wrap;
gap:var(--space-s);
font-size:var(--text-xs);
justify-content:space-between;
align-items:start;
@media(width >= 55em) {
flex-direction:column;
align-items:end;
min-inline-size:var(--width-10);
}
@media(width < 55em) {
grid-column:2;
}
}
.text-link {
  display:inline-flex;
align-items:center;
gap:var(--space-xs);
font-size:var(--text-s);
font-weight:600;
color:var(--primary);
&:hover {
text-decoration:underline;
text-underline-offset:.25em;
}
}
.latest-essay {
  padding:var(--space-l);
background:var(--primary-ultra-light);
display:grid;
grid-template-columns:var(--grid-1);
gap:var(--space-l);
border-block-start:0.1875rem solid var(--primary);
&[hidden] {
display:none;
}
}
.status-dot {
  --empty-element-size:0;
display:inline-block;
inline-size:.5em;
block-size:.5em;
background:var(--primary);
border-radius:50%;
flex-shrink:0;
}
.latest-essay__footer {
  display:flex;
flex-wrap:wrap;
gap:var(--space-s);
justify-content:space-between;
align-items:center;
font-size:var(--text-xs);
}
.product-card {
  display:grid;
grid-template-rows:subgrid;
grid-row:span 3;
gap:var(--space-l);
padding:var(--space-m);
border:0.0625rem solid var(--base-light);
background:var(--white);
position:relative;
transition:border-color .2s, transform .2s;
&:hover {
border-color:var(--primary);
transform:translateY(calc(0.1875rem * -1));
}
}
.product-card__head {
  display:flex;
gap:var(--space-xs);
justify-content:space-between;
align-items:center;
color:var(--text-dark-muted);
}
.product-card__link {
  display:block;
align-self:start;
color:var(--base);
&::after {
content:'';
position:absolute;
inset:0;
}
}
.product-card__body {
  display:grid;
align-content:start;
}
.product-ticker__item {
  display:grid;
place-items:center;
flex:1;
min-inline-size:0;
}
.section-heading {
  display:flex;
align-items:end;
justify-content:space-between;
gap:var(--space-m);
& > div:first-child {
display:grid;
gap:var(--space-xs);
}
@media(width < 44em) {
align-items:start;
flex-direction:column;
}
@media(width >= 44em) {
&:has(> .section-heading__note):has(> div:first-child > .eyebrow) {
display:grid;
grid-template-columns:var(--grid-2);
align-items:start;
row-gap:var(--space-xs);
& > div:first-child {
grid-row:1 / span 2;
grid-template-rows:subgrid;
}
}
}
}
.section-heading__note {
  font-size:var(--text-s);
color:var(--text-dark-muted);
@media(width >= 44em) {
grid-column:2;
grid-row:2;
}
}
.page-intro {
  display:grid;
gap:var(--space-m);
}
.accent-text {
  color:var(--primary);
}
.page-intro__lede {
  font-size:var(--text-l);
color:var(--text-dark-muted);
max-inline-size:var(--width-70);
}
.author-line {
  display:flex;
gap:var(--space-s);
align-items:center;
font-size:var(--text-s);
}
.site-nav__contact {
  padding-inline:var(--space-s);
border-radius:var(--radius);
background:var(--nav-button-background,var(--base));
color:var(--nav-button-color,var(--white));
&:is(:hover,[aria-current="page"]) {
background:var(--primary);
color:var(--white);
}
@media(width < 40em) {
padding-inline:var(--space-xs);
}
}
.section-stack {
  display:flex;
flex-direction:column;
gap:var(--content-gap);
}
.actions {
  display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--space-m);
}
.editorial-hero {
  --section-padding-block: var(--section-space-m);
background: var(--white);
}
.editorial-hero__inner {
  display:grid;
gap:var(--space-xl);
align-items:center;
@media(width >= 50em) {
grid-template-columns:var(--grid-3-2);
}
}
.editorial-hero__copy {
  display:grid;
gap:var(--space-m);
}
.editorial-hero__copy h1 {
  letter-spacing:-.045em;
line-height:1.04;
font-size:calc(var(--h1) * 1.23);
}
.editorial-hero__lede {
  max-inline-size:var(--width-50);
font-size:var(--text-l);
color:var(--text-dark-muted);
}
.editorial-hero__detail {
  max-inline-size:var(--width-50);
font-size:var(--text-s);
color:var(--text-dark-muted);
}
.communication-intro {
  max-inline-size:var(--width-70);
color:var(--text-dark-muted);
}
.communication-formats {
  display:flex;
flex-wrap:wrap;
gap:var(--space-s);
font-family:'MG JetBrains Mono', monospace;
font-size:var(--text-xs);
color:var(--primary);
}
.communication-formats__soon {
  color:var(--text-dark-muted);
border-inline-start:0.0625rem solid var(--base-light);
padding-inline-start:var(--space-s);
}
.portrait {
  inline-size:min(100%,var(--photo-frame-max));
--photo-frame-max:var(--width-40);
justify-self:center;
@media(width < 50em) {
--photo-frame-max:var(--width-50);
}
}
.portrait > img {
  object-position:center 32%;
filter:saturate(.8);
}
.product-affiliation {
  --section-padding-block: 0;
--gutter: 0;
background: var(--base);
}
.product-ticker {
  container-type:inline-size;
inline-size:100%;
overflow:hidden;
padding-block:var(--space-m);
background:var(--base);
&:is(:hover,:focus-within) {
--ticker-play-state:paused;
}
&:focus-visible {
outline:0.125rem solid var(--primary-light);
outline-offset:calc(0.125rem * -1);
}
}
.product-ticker__track {
  display:flex;
inline-size:max-content;
@media(prefers-reduced-motion:no-preference) {
animation:product-logos-scroll 48s linear infinite;
animation-play-state:var(--ticker-play-state,running);
}
}
.product-ticker__group {
  display:flex;
align-items:center;
justify-content:space-around;
gap:var(--space-xl);
inline-size:max(100cqi,var(--content-width));
flex-shrink:0;
padding-inline:var(--space-l);
@media(prefers-reduced-motion:reduce) {
inline-size:100cqi;
gap:var(--space-m);
padding-inline:0;
}
@media(prefers-reduced-motion:reduce) {
&[aria-hidden="true"] {
display:none;
}
}
@media(prefers-reduced-motion:reduce) {
@media(width < 40em) {
display:grid;
grid-template-columns:var(--grid-2);
}
}
}
.product-ticker__logo {
  color:var(--white);
&[data-platform="WP"], &[data-platform="Studio"] {
--product-logo-filter:brightness(0) invert(1);
}
}
.editorial-writing {
  background:var(--base-ultra-light);
}
.writing-list {
  display:grid;
}
.writing-row__body h3 a {
  color:var(--base);
&:hover {
color:var(--primary);
}
}
.writing-row__end a {
  font-size:var(--text-xl);
}
.letter > div {
  display:grid;
gap:var(--space-xs);
max-inline-size:var(--width-60);
}
.letter > a {
  flex-shrink:0;
}
.products-list {
  display:grid;
gap:var(--grid-gap);
@media(width >= 50em) {
grid-template-columns:var(--grid-2);
}
@media(width >= 75em) {
grid-template-columns:var(--grid-4);
}
}
.product-card__logo {
  --product-logo-filter:brightness(0);
--product-logo-height:var(--space-m);
block-size:calc(var(--space-l) + var(--space-s));
align-self:start;
color:var(--base);
&[data-brand="acss"] {
--product-logo-filter:grayscale(1) invert(1) contrast(2);
}
&[data-brand="frames"] {
--product-logo-height:var(--space-l);
}
}
.product-card__body p {
  color:var(--text-dark-muted);
font-size:var(--text-s);
}
.about-note {
  background:var(--base-ultra-light);
}
.about-note__inner {
  display:grid;
align-items:center;
gap:var(--space-xl);
@media(width >= 50em) {
grid-template-columns:var(--grid-2-3);
}
}
.about-photo {
  display:grid;
gap:var(--space-s);
min-inline-size:0;
}
.about-photo__image {
  object-position:60% 38%;
}
.conversation {
  background:var(--primary-ultra-dark);
color:var(--white);
}
.conversation__inner {
  display:flex;
flex-direction:row;
align-items:center;
justify-content:space-between;
gap:var(--space-l);
@media(width < 50em) {
flex-direction:column;
align-items:start;
}
}
.conversation__inner > div {
  display:grid;
gap:var(--space-m);
}
.conversation__inner h2 {
  color:var(--white);
font-size:var(--h1);
letter-spacing:-.035em;
}
.conversation__inner p {
  color:var(--primary-ultra-light);
}
.conversation__link {
  color:var(--white);
font-size:var(--text-xl);
display:flex;
align-items:center;
gap:var(--space-xl);
padding-block:var(--space-s);
border-block-end:0.0625rem solid var(--primary-semi-light);
white-space:nowrap;
&:hover {
color:var(--primary-light);
}
}
.conversation__link span {
  font-size:var(--h1);
}
.site-footer__inner p {
  color:var(--text-dark-muted);
}
.site-footer__links a {
  color:var(--text-dark-muted);
}
.page-intro h1 {
  font-size:calc(var(--h1) * 1.15);
line-height:1.04;
letter-spacing:-.045em;
}
.reading-prose {
  min-inline-size:0; font-size:var(--text-m); line-height:1.8; overflow-wrap:anywhere;
& > :first-child { margin-block-start:0; }
}
.reading-prose > * + * {
  margin-block-start:var(--space-m);
}
.reading-prose ul {
  list-style:disc;
padding-inline-start:1.3em;
}
.reading-prose ol {
  list-style:decimal;
padding-inline-start:1.3em;
}
.reading-prose li + li {
  margin-block-start:var(--space-xs);
}
.reading-prose img {
  margin-inline:auto;
}
.reading-prose table {
  display:block;
max-inline-size:100%;
overflow-x:auto;
border-collapse:collapse;
font-size:var(--text-s);
}
.reading-prose th {
  padding:var(--space-s); border:0.0625rem solid var(--base-light); text-align:start; background:var(--base-ultra-light); font-weight:650;
}
.reading-prose blockquote {
  border-inline-start:0.1875rem solid var(--primary); padding-inline-start:var(--space-m); font-size:var(--text-l);
}
.reading-prose pre {
  overflow-x:auto;
padding:var(--space-m);
background:var(--base-ultra-light);
font-family:'MG JetBrains Mono', monospace; font-size:.88em;
}
.reading-prose hr {
  border:0;
border-block-start:0.0625rem solid var(--base-light);
}
.reading-prose--centered {
  max-inline-size:var(--width-70);
margin-inline:auto;
inline-size:100%;
}
.biography-opening {
  background:var(--white);
}
.biography-opening__inner {
  display:grid;
gap:var(--space-xl);
align-items:center;
@media(width >= 50em) {
grid-template-columns:var(--grid-3-2);
}
}
.biography-opening__portrait {
  justify-self:center;
max-inline-size:var(--width-30);
display:grid;
gap:var(--space-s);
}
.biography-opening__portrait img {
  object-position:center 28%;
}
.biography-context {
  background:var(--base-ultra-light);
}
.biography-context__inner {
  display:grid;
gap:var(--space-xl);
align-items:start;
@media(width >= 60em) {
grid-template-columns:var(--grid-1-2);
}
}
.biography-chapter {
  border-block-end:0.0625rem solid var(--base-light);
}
.biography-chapter__inner {
  display:grid;
gap:var(--space-l);
@media(width >= 60em) {
grid-template-columns:var(--grid-1-2);
}
}
.biography-chapter__heading {
  display:grid;
gap:var(--space-s);
align-content:start;
@media(width >= 60em) {
position:sticky;
inset-block-start:var(--space-l);
}
}
.page-closing {
  background:var(--white);
}
.publication-opening {
  background:var(--white);
}
.publication-opening__inner {
  display:grid;
gap:var(--space-xl);
align-items:center;
@media(width >= 65em) {
grid-template-columns:var(--grid-3-2);
}
&:has(> .latest-essay[hidden]) {
grid-template-columns:minmax(0,1fr);
}
}
.latest-essay h2 {
  font-size:var(--h2);
letter-spacing:-.035em;
}
.latest-essay h2 a {
  color:var(--base);
&:hover {
color:var(--primary);
}
}
.publication-archive {
  background:var(--base-ultra-light);
}
.publication-archive__note {
  font-size:var(--text-s);
color:var(--text-dark-muted);
&[hidden] {
display:none;
}
}
.publication-filters {
  display:flex;
flex-wrap:wrap;
gap:var(--space-xs);
flex-shrink:0;
}
.publication-filters__button {
  padding:var(--space-xs) var(--space-s);
border:0.0625rem solid var(--base-light);
border-radius:var(--radius);
color:var(--base);
font-size:var(--text-s);
background:var(--white);
&[aria-pressed="true"] {
background:var(--base);
border-color:var(--base);
color:var(--white);
}
&:hover {
border-color:var(--primary);
}
&:focus-visible {
outline:0.125rem solid var(--primary);
outline-offset:0.1875rem;
}
}
.podcast-preview {
  display:grid;
gap:var(--space-m);
padding:var(--space-l);
border-inline-start:0.1875rem solid var(--primary);
background:var(--white);

&[hidden] {
display:none;
}
@media(width >= 55em) {
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
}
}
.publication-filter-status {
  font-size:var(--text-xs);
color:var(--text-dark-muted);
&:empty {
display:none;
}
}
.publication-signup {
  background:var(--primary-ultra-light);
scroll-margin-block-start:var(--space-m);
}
.publication-signup__inner {
  display:grid;
gap:var(--space-xl);
align-items:center;
@media(width >= 60em) {
grid-template-columns:var(--grid-2-3);
}
}
.publication-signup__note {
  font-size:var(--text-s);
color:var(--text-dark-muted);
}
.essay-archive {
  display:grid;
}
.essay-row__copy h3 {
  font-size:var(--h3);
}
.essay-row__copy a {
  color:var(--base);
&:hover {
color:var(--primary);
}
}
.article-opening__center {
  max-inline-size:var(--width-80);
margin-inline:auto;
display:grid;
gap:var(--space-m);
justify-items:start;
}
.article-opening__center h1 {
  font-size:calc(var(--h1) * 1.12);
line-height:1.06;
letter-spacing:-.045em;
}
.article-opening__lede {
  font-size:var(--text-l);
color:var(--text-dark-muted);
}
.article-meta {
  display:flex;
gap:var(--space-s) var(--space-m);
flex-wrap:wrap;
font-family:'MG JetBrains Mono', monospace;
font-size:var(--text-xs);
color:var(--text-dark-muted);
}
.author-line > div {
  display:grid;
gap:.1em;
}
.author-line a {
  color:var(--base);
font-weight:600;
}
.author-line p {
  font-size:var(--text-xs);
color:var(--text-dark-muted);
}
.article-feature {
  margin-block-start:var(--space-xl);
display:grid;
gap:var(--space-s);
justify-items:center;
}
.article-reading {
  padding-block-start:0;
}
.article-response {
  background:var(--primary-ultra-light);
}
.article-response__inner {
  display:grid;
gap:var(--space-xl);
align-items:start;
@media(width >= 55em) {
grid-template-columns:var(--grid-2-3);
}
}
.article-next h2 {
  max-inline-size:var(--width-80);
}
.article-next h2 a {
  color:var(--base);
&:hover {
color:var(--primary);
}
}
.contact-opening__inner {
  display:grid;
gap:var(--space-xl);
align-items:start;
@media(width >= 60em) {
grid-template-columns:var(--grid-2-3);
}
}
.contact-opening__copy {
  display:grid;
gap:var(--space-l);
}
.contact-opening__photo {
  max-inline-size:var(--width-30);
inline-size:100%;
display:grid;
gap:var(--space-s);
@media(width < 60em) {
display:none;
}
}
.contact-opening__photo img {
  object-position:75% center;
}
.contact-links {
  display:grid;
justify-items:start;
gap:var(--space-s);
}
.form-panel {
  background:var(--base-ultra-light);
padding:var(--space-l);
@media(width < 40em) {
padding:var(--space-m);
}
}
.newsletter-signup {
  background:var(--white);
padding:var(--space-l);
display:grid;
gap:var(--space-m);
border-block-start:0.1875rem solid var(--primary);
@media(width < 40em) {
padding:var(--space-m);
}
}
.newsletter-signup h2 {
  font-size:var(--h3);
}
.legal-opening__inner {
  max-inline-size:var(--width-70);
margin-inline:auto;
}
.legal-reading {
  padding-block-start:0;
}
.state-page__inner {
  display:grid;
gap:var(--space-l);
max-inline-size:var(--width-70);
margin-inline:auto;
}
.state-page__inner h1 {
  font-size:var(--h1);
line-height:1.04;
letter-spacing:-.04em;
}
.reading-prose h2 {
  line-height:1.2; scroll-margin-block-start:var(--space-l);
}
.reading-prose h3 {
  line-height:1.2; scroll-margin-block-start:var(--space-l);
}
.reading-prose h4 {
  line-height:1.2; scroll-margin-block-start:var(--space-l);
}
.reading-prose > h2 {
  margin-block-start:var(--space-xl);
}
.reading-prose > h3 {
  margin-block-start:var(--space-xl);
}
.reading-prose a {
  overflow-wrap:anywhere;
}
.reading-prose code {
  overflow-wrap:anywhere;
font-family:'MG JetBrains Mono', monospace; font-size:.88em;
}
.reading-prose td {
  padding:var(--space-s); border:0.0625rem solid var(--base-light); text-align:start;
}
.letter p {
  &:not(.eyebrow) { 
font-size:var(--text-s);
 }
}
.latest-essay > p {
  &:not(.eyebrow) { 
color:var(--text-dark-muted);
font-size:var(--text-s);
 }
}
.podcast-preview p {
  &:not(.eyebrow) { 
max-inline-size:var(--width-60);
color:var(--text-dark-muted);
font-size:var(--text-s);
 }
}
.essay-row__copy > p {
  &:not(.eyebrow) { 
color:var(--text-dark-muted);
font-size:var(--text-s);
max-inline-size:var(--width-70);
 }
}
.article-meta span {
  &:first-child { color:var(--primary); }
}
.photo-frame > img {
  position:relative; z-index:1; inline-size:100%; block-size:auto; max-block-size:none;
aspect-ratio:4/5; object-fit:cover; background:var(--white); transform:none; transform-origin:center;
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
 transition:transform 400ms cubic-bezier(.25,.8,.25,1);
 .photo-frame:hover & { transform:rotate(2deg); }
}
}
.photo-frame--compact {
  --photo-frame-offset:var(--space-xs); inline-size:var(--space-xl); flex-shrink:0;
}
.photo-frame--document {
  max-inline-size:min(100%,var(--width-50));
}
.photo-frame--document > img {
  object-fit:contain;
}
.form-panel .contact-form {
  min-inline-size:0; inline-size:100%;
}
.form-panel .contact-form__control {
  min-inline-size:0; inline-size:100%; padding:var(--space-s);
background:var(--white); border:0.0625rem solid var(--base-semi-light); border-radius:0;
color:var(--base); font-size:var(--text-s);
&:focus-visible { outline:0.125rem solid var(--primary); outline-offset:0.125rem; }
}
.form-panel .contact-form__label {
  font-size:var(--text-s); font-weight:550;
}
.form-panel .contact-form__consent-label {
  font-size:var(--text-xs); line-height:1.6; color:var(--base);
}
.form-panel .contact-form__checkbox {
  accent-color:var(--primary); --empty-element-size:0;
}
.form-panel textarea.contact-form__control {
  resize:vertical; min-block-size:var(--space-xxl);
}
.form-panel select.contact-form__control {
  padding-inline-end:var(--space-l);
}
.newsletter-signup .contact-form {
  min-inline-size:0; inline-size:100%;
}
.newsletter-signup .contact-form__control {
  min-inline-size:0; inline-size:100%; padding:var(--space-s);
background:var(--white); border:0.0625rem solid var(--base-semi-light); border-radius:0;
color:var(--base); font-size:var(--text-s);
&:focus-visible { outline:0.125rem solid var(--primary); outline-offset:0.125rem; }
}
.newsletter-signup .contact-form__label {
  font-size:var(--text-s); font-weight:550;
}
.newsletter-signup .contact-form__consent-label {
  font-size:var(--text-xs); line-height:1.6; color:var(--base);
}
.newsletter-signup .contact-form__checkbox {
  accent-color:var(--primary); --empty-element-size:0;
}
.newsletter-signup textarea.contact-form__control {
  resize:vertical; min-block-size:var(--space-xxl);
}
.newsletter-signup select.contact-form__control {
  padding-inline-end:var(--space-l);
}
.portrait .photo-frame > img {
  object-position:center 32%;
filter:saturate(.8);
}
.photo-frame > a {
  position:relative; z-index:1; & > img {inline-size:100%; aspect-ratio:4/5; object-fit:contain; background:var(--white); @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {transition:transform 400ms cubic-bezier(.25,.8,.25,1); .photo-frame:hover & {transform:rotate(2deg);}}}
}