@font-face {
  font-family: "Merriweather";
  src: url("/assets/fonts/elel-serif/Merriweather-VariableFont_opsz,wdth,wght.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Merriweather";
  src: url("/assets/fonts/elel-serif/Merriweather-Italic-VariableFont_opsz,wdth,wght.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 300 900;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Code";
  src: url("/assets/fonts/elel-code/GoogleSansCode-VariableFont_wght.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans Code";
  src: url("/assets/fonts/elel-code/GoogleSansCode-Italic-VariableFont_wght.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Audiowide";
  src: url("/assets/fonts/Audiowide-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --brand-ink: #161717;
  --brand-orange: #c45a1b;
  --brand-blue: #68b9e0;
  --brand-cream: #f8f6ec;
  --accent-orange-text: #a84913;
  --accent-blue-text: #24779d;
  --accent-orange-soft: rgba(196, 90, 27, 0.12);
  --accent-blue-soft: rgba(104, 185, 224, 0.16);
  --bg: var(--brand-cream);
  --text: var(--brand-ink);
  --muted: #75716a;
  --border: rgba(31, 31, 31, 0.18);
  --border-strong: rgba(31, 31, 31, 0.34);
  --surface: rgba(255, 255, 255, 0.28);
  --accent: var(--accent-orange-text);
  --accent-secondary: var(--accent-blue-text);
  --accent-soft: var(--accent-orange-soft);
  --accent-secondary-soft: var(--accent-blue-soft);
  --utility-hover: var(--accent-orange-text);
  --focus: rgba(36, 119, 157, 0.42);
  --header-bg: rgba(248, 246, 236, 0.64);
  --brand-cube-outline: #131313;
  --brand-cube-top: var(--bg);
  --brand-logo-wordmark: var(--brand-ink);
  --brand-dot-color: var(--accent-orange-text);
  --brand-dot-soft: var(--accent-orange-soft);
  --serif: "Merriweather", "Times New Roman", serif;
  --display: "Audiowide", var(--code);
  --code: "Google Sans Code", "SF Mono", "SFMono-Regular", "Cascadia Code", monospace;
  --content: 66ch;
  --wide: 880px;
  --space-page-top: max(28px, calc(env(safe-area-inset-top) + 18px));
  --space-header-bottom: clamp(48px, 9vw, 96px);
  --space-section: clamp(48px, 8vw, 86px);
  /* Tighter transition from a page hero into its content. The home page uses
     its own flow spacing and is intentionally unaffected. */
  --space-hero-bottom: clamp(40px, 6vw, 64px);
  --space-section-tight: clamp(24px, 4vw, 40px);
  --space-heading-body: 1.125rem;
  --space-paragraph: 1em;
  --space-list-row: 1.0625rem;
  --space-footer-top: var(--space-section);
  --page-top: var(--space-page-top);
  --page-bottom: max(34px, calc(env(safe-area-inset-bottom) + 20px));
  --gutter: max(22px, calc(env(safe-area-inset-left) + 16px));
  --motion: 180ms ease;
  --brand-cube-size: 42px;
  --footer-elel-mark-size: 20px;
  --hero-home-size: clamp(2.5rem, 6vw, 2.8rem);
  --hero-page-size: clamp(2.35rem, 5.2vw, 3.5rem);
  --hero-detail-size: clamp(2.15rem, 4.8vw, 3.2rem);
  --index-title-size: 1.12rem;
  --up-right-arrow-size: clamp(1.5625rem, 2.5vw, 2.0625rem);
  --link-icon-size: 1.65rem;
  --link-icon-offset: 0.15rem;
  --menu-kicker-size: 18px;
  --kicker-title-gap: 0.7rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131313;
    --text: #e5decc;
    --muted: #aaa294;
    --border: rgba(242, 234, 215, 0.2);
    --border-strong: rgba(242, 234, 215, 0.38);
    --surface: rgba(242, 234, 215, 0.05);
    --accent-orange-text: #d66d2a;
    --accent-blue-text: var(--brand-blue);
    --accent-orange-soft: rgba(196, 90, 27, 0.18);
    --accent-blue-soft: rgba(104, 185, 224, 0.14);
    --accent: var(--accent-orange-text);
    --accent-secondary: var(--accent-blue-text);
    --accent-soft: var(--accent-orange-soft);
    --accent-secondary-soft: var(--accent-blue-soft);
    --utility-hover: var(--accent-blue-text);
    --focus: rgba(104, 185, 224, 0.46);
    --header-bg: rgba(19, 19, 19, 0.62);
    --brand-cube-top: var(--text);
    --brand-logo-wordmark: var(--text);
    --brand-dot-color: var(--accent-orange-text);
    --brand-dot-soft: var(--accent-orange-soft);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: var(--brand-cream);
  --text: var(--brand-ink);
  --muted: #75716a;
  --border: rgba(31, 31, 31, 0.18);
  --border-strong: rgba(31, 31, 31, 0.34);
  --surface: rgba(255, 255, 255, 0.28);
  --accent-orange-text: #a84913;
  --accent-blue-text: #24779d;
  --accent-orange-soft: rgba(196, 90, 27, 0.12);
  --accent-blue-soft: rgba(104, 185, 224, 0.16);
  --accent: var(--accent-orange-text);
  --accent-secondary: var(--accent-blue-text);
  --accent-soft: var(--accent-orange-soft);
  --accent-secondary-soft: var(--accent-blue-soft);
  --utility-hover: var(--accent-orange-text);
  --focus: rgba(36, 119, 157, 0.42);
  --header-bg: rgba(248, 246, 236, 0.64);
  --brand-cube-top: var(--bg);
  --brand-logo-wordmark: var(--brand-ink);
  --brand-dot-color: var(--accent-orange-text);
  --brand-dot-soft: var(--accent-orange-soft);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131313;
  --text: #e5decc;
  --muted: #aaa294;
  --border: rgba(242, 234, 215, 0.2);
  --border-strong: rgba(242, 234, 215, 0.38);
  --surface: rgba(242, 234, 215, 0.05);
  --accent-orange-text: #d66d2a;
  --accent-blue-text: var(--brand-blue);
  --accent-orange-soft: rgba(196, 90, 27, 0.18);
  --accent-blue-soft: rgba(104, 185, 224, 0.14);
  --accent: var(--accent-orange-text);
  --accent-secondary: var(--accent-blue-text);
  --accent-soft: var(--accent-orange-soft);
  --accent-secondary-soft: var(--accent-blue-soft);
  --utility-hover: var(--accent-blue-text);
  --focus: rgba(104, 185, 224, 0.46);
  --header-bg: rgba(19, 19, 19, 0.62);
  --brand-cube-top: var(--text);
  --brand-logo-wordmark: var(--text);
  --brand-dot-color: var(--accent-orange-text);
  --brand-dot-soft: var(--accent-orange-soft);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.62;
}

* {
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration-color: transparent;
  text-underline-offset: 0.16em;
  transition: color var(--motion), text-decoration-color var(--motion), border-color var(--motion), background-color var(--motion), transform var(--motion);
}

a,
button,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
}

a:hover,
a:focus-visible {
  color: var(--accent);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

p + p {
  margin-top: var(--space-paragraph);
}

.site-page {
  min-height: 100vh;
  padding: var(--page-top) var(--gutter) var(--page-bottom);
  /* Contain full-bleed layers and animated overflow without a scroll container. */
  overflow-x: clip;
}

@media (orientation: landscape) {
  .site-page {
    --gutter: max(30px, calc(env(safe-area-inset-left) + 24px));
  }
}

.site-header,
.site-main,
.site-footer {
  width: min(var(--wide), 100%);
  margin-inline: auto;
}

.site-header {
  --header-offset: max(8px, env(safe-area-inset-top));
  position: relative;
  z-index: 100;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: var(--space-header-bottom);
  font-family: var(--code);
}

.home-page {
  --home-flow-gap: 2.5rem;
}

.home-page .site-header {
  margin-bottom: var(--home-flow-gap);
}

.site-header::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--header-offset));
  bottom: -8px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.brand-lockup {
  min-height: var(--brand-cube-size);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.brand-cube {
  display: none;
  width: var(--brand-cube-size);
  height: var(--brand-cube-size);
  flex: 0 0 auto;
  object-fit: contain;
  transform: translateY(1px);
  transition: transform 220ms ease, opacity 220ms ease;
}

.brand-lockup:hover .brand-cube,
.brand-lockup:focus-visible .brand-cube {
  transform: translateY(0) scale(1.03);
}

.brand-wordmark {
  text-transform: lowercase;
  position: relative;
  top: 1px;
  display: inline-block;
  white-space: nowrap;
  color: var(--brand-logo-wordmark);
  font-family: var(--display);
  font-size: 45px;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: color var(--motion), opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
}

.brand-wordmark.is-animated {
  display: inline-flex;
}

.brand-letter {
  display: inline-block;
  transform-origin: center 85%;
  will-change: transform, opacity, filter;
}

.brand-dot {
  --brand-dot-glow: 0 0 6px 1px var(--brand-dot-soft);
  color: var(--brand-dot-color);
  box-shadow: var(--brand-dot-glow);
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0;
  will-change: transform, opacity, filter, box-shadow;
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px 16px;
}

.site-nav a,
.theme-toggle,
.inline-action,
.nav-link,
.back-link,
.primary-action,
.pill-link {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--code);
  font-size: 13px;
  line-height: 1;
}

.site-nav a {
  position: relative;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--motion), transform var(--motion);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--accent);
  transform: translateY(-1px);
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 700;
}

.site-nav a[aria-current="page"]::after {
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left;
}

.theme-toggle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  outline: none;
  box-shadow: none;
  transition: transform 150ms ease, color var(--motion), opacity 150ms ease, background-color 150ms ease;
}

.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
  transition: color var(--motion);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  transform: translateY(-1px);
  opacity: 0.8;
  background: transparent;
}

.theme-toggle:hover .sun-icon,
.theme-toggle:focus-visible .sun-icon {
  color: var(--accent);
}

.theme-toggle:hover .moon-icon,
.theme-toggle:focus-visible .moon-icon {
  color: var(--accent-secondary);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.theme-toggle:focus,
.theme-toggle:active {
  background: transparent;
  box-shadow: none;
}

.menu-toggle {
  display: none;
}

.site-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow-wrap: anywhere;
  gap: var(--space-section);
}

.home-intro,
.page-intro,
.article-content,
.project-content,
.michael-content,
.work-content {
  width: min(var(--content), 100%);
  min-width: 0;
  max-width: 100%;
}

.home-intro h1,
.page-intro h1,
.article-title,
.michael-content h1 {
  margin: 0;
  line-height: 1.04;
  font-weight: 520;
  letter-spacing: 0;
}

.home-intro h1 {
  font-size: var(--hero-home-size);
}

.home-page .home-intro h1 {
  font-size: var(--hero-home-size);
}

.page-intro h1,
.michael-content h1 {
  font-size: var(--hero-page-size);
}

.article-title {
  font-size: var(--hero-detail-size);
}

.article-title--wordsprout {
  font-family: var(--code);
  font-weight: 500;
}

.project-wordmark {
  font-family: var(--display);
  font-weight: 400;
}

.home-intro h1 {
  max-width: 12.5ch;
}

.home-title-accent {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.home-title-accent::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.01em;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: left;
}

.home-title-accent--blue::after {
  background: var(--accent-secondary);
}

@media (min-width: 721px) {
  .home-intro h1 {
    max-width: none;
  }

  .site-nav {
    gap: 10px 20px;
  }

  .site-nav a {
    font-size: 1rem;
  }
}

.home-intro > .lede,
.home-values {
  max-width: min(31rem, 100%);
}

.lede,
.project-summary {
  margin-top: var(--space-heading-body);
  color: var(--muted);
  font-size: clamp(1.05rem, 2.5vw, 1.28rem);
  line-height: 1.5;
}

.home-links {
  width: min(34rem, 100%);
  display: grid;
  gap: 1rem;
  margin-top: calc(var(--home-flow-gap) + var(--space-section-tight) - 0.5rem);
}

.home-links a {
  display: grid;
  grid-template-columns: 2.65rem max-content;
  align-items: center;
  min-height: 3.55rem;
  color: var(--text);
  font-family: var(--code);
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.15rem 0;
  text-decoration: none;
  text-transform: uppercase;
  transition: color var(--motion);
}

.home-link-icon {
  width: var(--link-icon-size);
  height: var(--link-icon-size);
  align-self: start;
  margin-top: var(--link-icon-offset);
  position: relative;
}

.home-link-icon::before,
.home-link-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
}

.home-link-icon--lab::before {
  background: var(--accent-secondary);
  mask: url("/assets/icons/app-badging-ring.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/app-badging-ring.svg") center / contain no-repeat;
}

.home-link-icon--lab::after {
  mask: url("/assets/icons/app-badging-dot.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/app-badging-dot.svg") center / contain no-repeat;
}

.home-link-icon--studio::before {
  mask: url("/assets/icons/draw-pencil.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/draw-pencil.svg") center / contain no-repeat;
}

.home-link-icon--studio::after {
  background: var(--accent-secondary);
  mask: url("/assets/icons/draw-traces.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/draw-traces.svg") center / contain no-repeat;
}

.home-link-icon--workshop::before {
  background: var(--accent-secondary);
  mask: url("/assets/icons/shadow-back.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/shadow-back.svg") center / contain no-repeat;
}

.home-link-icon--workshop::after {
  background: var(--accent);
  mask: url("/assets/icons/shadow-front.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/shadow-front.svg") center / contain no-repeat;
}

.home-links a > .home-link-copy {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 0.22rem;
}

.home-link-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.home-link-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.home-link-text::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.home-link-copy small {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.86em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.home-link-arrow {
  color: var(--accent-secondary);
  font-family: var(--serif);
  font-size: var(--up-right-arrow-size);
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translate(-0.35rem, 0.15rem);
  transition: opacity var(--motion), transform var(--motion);
}

.home-links a:hover,
.home-links a:focus-visible {
  color: var(--accent);
}

.home-links a:hover .home-link-text::before,
.home-links a:focus-visible .home-link-text::before {
  transform: scaleX(1);
  transform-origin: left;
}

.home-links a:hover .home-link-arrow,
.home-links a:focus-visible .home-link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.daily-artifact {
  width: min(56rem, 100%);
  margin-top: var(--space-section-tight);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1.5px solid var(--border-strong);
}

.daily-artifact-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.showcase-actions {
  display: inline-flex;
  gap: 0;
}

.showcase-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transition: color var(--motion), transform var(--motion);
}

.showcase-arrow::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.showcase-arrow--previous::before {
  mask-image: url("/assets/icons/arrow-back.svg");
  -webkit-mask-image: url("/assets/icons/arrow-back.svg");
}

.showcase-arrow--next::before {
  mask-image: url("/assets/icons/arrow-forward.svg");
  -webkit-mask-image: url("/assets/icons/arrow-forward.svg");
}

.showcase-arrow:hover,
.showcase-arrow:focus-visible {
  color: var(--utility-hover);
  transform: translateX(-1px);
}

.showcase-arrow--next:hover,
.showcase-arrow--next:focus-visible {
  transform: translateX(1px);
}

.daily-artifact-slide {
  display: grid;
  grid-template-columns: minmax(11rem, 0.7fr) minmax(0, 1.3fr);
  align-content: start;
  align-items: start;
  gap: clamp(2rem, 7vw, 7rem);
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
}

.daily-artifact-slide[hidden] {
  display: none;
}

.daily-artifact-slides {
  position: relative;
  height: var(--showcase-height, 23rem);
  overflow: hidden;
}

.daily-artifact-slide.is-entering.showcase-direction-next {
  animation: showcase-enter-next 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-artifact-slide.is-leaving.showcase-direction-next {
  animation: showcase-leave-next 220ms ease both;
}

.daily-artifact-slide.is-entering.showcase-direction-previous {
  animation: showcase-enter-previous 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-artifact-slide.is-leaving.showcase-direction-previous {
  animation: showcase-leave-previous 220ms ease both;
}

@keyframes showcase-enter-next {
  from { opacity: 0; transform: translateX(4%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes showcase-leave-next {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(-4%); }
}

@keyframes showcase-enter-previous {
  from { opacity: 0; transform: translateX(-4%); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes showcase-leave-previous {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(4%); }
}

.daily-artifact h2 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.daily-artifact-type {
  margin: 0.8rem 0 0;
  color: var(--accent-secondary);
  font-family: var(--code);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

.daily-artifact-copy {
  max-width: 34rem;
  color: var(--muted);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.55;
}

.workshop-statement {
  width: min(var(--content), 100%);
  /* The main grid already sets the hero-to-content rhythm. */
  margin-top: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.workshop-statement p {
  margin: 0;
}

.workshop-statement p + p {
  margin-top: var(--space-paragraph);
}

.lab-quote {
  font-style: italic;
}

.daily-artifact-copy p {
  margin: 0;
}

.daily-artifact-copy p + p {
  margin-top: var(--space-paragraph);
}

.daily-artifact-link.inline-action,
.showcase-action-link.inline-action {
  font-size: 18px;
  line-height: 1;
}

.daily-artifact-link.inline-action::after,
.showcase-action-link.inline-action::after {
  align-self: center;
  transform: translateY(0);
}

.daily-artifact-link.inline-action:hover::after,
.daily-artifact-link.inline-action:focus-visible::after,
.showcase-action-link.inline-action:hover::after,
.showcase-action-link.inline-action:focus-visible::after {
  transform: translate(2px, 0);
}

.daily-artifact-meaning {
  color: var(--text);
}

.daily-artifact-meaning span,
.daily-artifact-label {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--accent);
  font-family: var(--code);
  font-size: 0.72em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .daily-artifact-slide {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .daily-artifact-slides {
    height: var(--showcase-height, 29rem);
  }

  .daily-artifact h2 {
    max-width: 14ch;
  }
}

.home-values {
  margin-top: calc(var(--home-flow-gap) - 0.5rem);
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
}

.home-page .home-intro > .lede {
  font-size: 1.05rem;
}

.home-page .home-intro > h1 + .lede {
  margin-top: var(--home-flow-gap);
}

.home-emphasis {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 500;
}

.home-emphasis--block,
.home-values-muted--block {
  display: block;
}

.kicker,
.row-meta,
.note-date,
.meta-line,
.project-meta {
  font-family: var(--code);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kicker {
  font-size: var(--menu-kicker-size);
  color: var(--accent);
  margin-bottom: var(--kicker-title-gap);
}

.article-meta {
  text-transform: none;
}

.section-heading {
  width: min(var(--content), 100%);
  margin-bottom: var(--space-heading-body);
}

.section-heading h2,
.about-preview h2,
.michael-preview h2,
.project-content h2,
.article-content h2,
.work-content h2 {
  font-family: var(--code);
  font-size: 13px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.article-content h2 {
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.25;
  color: var(--accent-secondary);
  margin: var(--space-section-tight) 0 var(--space-heading-body);
}

.project-content h2,
.work-content h2 {
  color: var(--accent);
}

.text-list,
.note-list,
.work-list {
  width: min(var(--content), 100%);
}

.text-row:first-child,
.note-list,
.work-list {
  border-top: 1px solid var(--border);
}

.text-row,
.note-link,
.work-entry {
  display: grid;
  gap: 10px;
  padding: var(--space-list-row) 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}

.text-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
}

.text-row strong,
.note-title {
  display: block;
  font-size: var(--index-title-size);
  font-weight: 520;
  transition: color var(--motion), transform var(--motion), text-decoration-color var(--motion);
}

.text-row small,
.note-summary {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.5;
}

.text-row:hover strong,
.text-row:focus-visible strong {
  color: var(--accent);
}

.projects-page .text-row strong {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--code);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
}

.projects-page .text-list {
  display: grid;
  gap: 1rem;
  border-top: 0;
}

.notes-page .note-list {
  display: grid;
  gap: 1rem;
  border-top: 0;
}

.projects-page .text-row:first-child {
  border-top: 0;
}

.notes-page .note-link {
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: 3.55rem;
  padding: 0.15rem 0;
  border-bottom: 0;
}

.projects-page .text-row {
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: 3.55rem;
  padding: 0.15rem 0;
  border-bottom: 0;
}

.project-link-icon,
.note-link-icon {
  position: relative;
  width: var(--link-icon-size);
  height: var(--link-icon-size);
  align-self: start;
  margin-top: 0;
  background: var(--accent);
  mask: url("/assets/icons/brick.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/brick.svg") center / contain no-repeat;
}

.project-link-icon--voice { mask-image: url("/assets/icons/project-voice.svg"); -webkit-mask-image: url("/assets/icons/project-voice.svg"); }
.project-link-icon--library { mask-image: url("/assets/icons/project-library.svg"); -webkit-mask-image: url("/assets/icons/project-library.svg"); }
.project-link-icon--circles { mask-image: url("/assets/icons/project-circles.svg"); -webkit-mask-image: url("/assets/icons/project-circles.svg"); }
.project-link-icon--dictionary { mask-image: url("/assets/icons/project-dictionary.svg"); -webkit-mask-image: url("/assets/icons/project-dictionary.svg"); }
.project-link-icon--chess { mask-image: url("/assets/icons/project-chess.svg"); -webkit-mask-image: url("/assets/icons/project-chess.svg"); }
.project-link-icon--assist { mask-image: url("/assets/icons/project-assist.svg"); -webkit-mask-image: url("/assets/icons/project-assist.svg"); }
.project-link-icon--black-onion { mask-image: url("/assets/icons/project-black-onion.svg"); -webkit-mask-image: url("/assets/icons/project-black-onion.svg"); }
.project-link-icon--liquid-bonsai { mask-image: url("/assets/icons/project-liquid-bonsai.svg"); -webkit-mask-image: url("/assets/icons/project-liquid-bonsai.svg"); }
.project-link-icon--wordsprout { background: var(--accent-secondary); mask-image: url("/assets/icons/project-wordsprout.svg"); -webkit-mask-image: url("/assets/icons/project-wordsprout.svg"); }

.note-link-icon {
  background: none;
  mask: none;
  -webkit-mask: none;
}

.note-link-icon::before,
.note-link-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.note-link-icon {
  margin-top: 0;
}

.note-link-icon::before {
  background: var(--accent);
  mask-image: url("/assets/icons/note-stack-front.svg");
  -webkit-mask-image: url("/assets/icons/note-stack-front.svg");
}

.note-link-icon::after {
  background: var(--accent-secondary);
  mask-image: url("/assets/icons/note-stack-back.svg");
  -webkit-mask-image: url("/assets/icons/note-stack-back.svg");
}

.projects-page .text-row small {
  margin-top: 0.22rem;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.86em;
  line-height: 1.2;
}

.projects-page .text-row .row-meta {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.75rem;
}

.note-link-copy {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
}

.notes-page .note-title {
  display: inline;
  font-family: var(--serif);
  font-size: var(--index-title-size);
  font-weight: 520;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
}

.notes-page .note-link-text {
  display: inline;
  padding-bottom: 0;
}

.notes-page .note-link-arrow {
  display: inline-block;
  margin-left: 0.45rem;
  vertical-align: text-top;
  white-space: nowrap;
}

.notes-page .note-link-end {
  white-space: nowrap;
}

.notes-page .note-date {
  color: var(--muted);
  font-family: var(--code);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.project-link-text,
.note-link-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
}

.project-link-text::after,
.note-link-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.project-link-arrow,
.note-link-arrow {
  color: var(--accent-secondary);
  font-family: var(--serif);
  font-size: var(--up-right-arrow-size);
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translate(-0.35rem, 0.15rem);
  transition: opacity var(--motion), transform var(--motion);
}

.projects-page .text-row:hover .project-link-text::after,
.projects-page .text-row:focus-visible .project-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.projects-page .text-row:hover .project-link-arrow,
.projects-page .text-row:focus-visible .project-link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.notes-page .note-link:hover .note-title,
.notes-page .note-link:focus-visible .note-title {
  color: var(--accent);
  text-decoration: none;
}

.notes-page .note-link:hover .note-link-text::after,
.notes-page .note-link:focus-visible .note-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.notes-page .note-link:hover .note-link-arrow,
.notes-page .note-link:focus-visible .note-link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.note-link:hover .note-title,
.note-link:focus-visible .note-title {
  color: var(--accent-secondary);
}

.text-row:hover strong,
.text-row:focus-visible strong,
.note-link:hover .note-title,
.note-link:focus-visible .note-title {
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.projects-page .text-row:hover strong,
.projects-page .text-row:focus-visible strong {
  text-decoration: none;
}

.notes-page .note-link:hover .note-title,
.notes-page .note-link:focus-visible .note-title {
  text-decoration: none;
}

.notes-page .note-link:hover .note-link-text,
.notes-page .note-link:focus-visible .note-link-text,
.notes-page .note-link:hover .note-link-end,
.notes-page .note-link:focus-visible .note-link-end {
  text-decoration: underline;
  text-decoration-color: var(--accent-secondary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.notes-page .note-link:hover .note-link-text::after,
.notes-page .note-link:focus-visible .note-link-text::after {
  display: none;
}

.row-meta,
.note-date,
.meta-line,
.project-meta,
.work-meta {
  color: var(--muted);
}

.note-link {
  grid-template-columns: 13.5rem minmax(0, 1fr);
}

.note-summary {
  grid-column: 2;
}

.michael-hub-section,
.work-archive {
  width: min(var(--content), 100%);
}

.michael-hub-section > p,
.work-entry > p,
.work-note {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.michael-links {
  width: min(34rem, 100%);
  display: grid;
  gap: 1.5rem;
}

.michael-links a,
.michael-link {
  display: grid;
  grid-template-columns: 2.65rem minmax(0, 1fr);
  align-items: start;
  gap: 0;
  min-height: 3.55rem;
  padding: 0.15rem 0;
  color: var(--text);
  font-family: var(--code);
  text-decoration: none;
  text-transform: uppercase;
}

.michael-link-icon {
  width: var(--link-icon-size);
  height: var(--link-icon-size);
  align-self: start;
  margin-top: 0;
  position: relative;
}

.michael-link-icon::before,
.michael-link-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.michael-link-icon--work::before {
  mask-image: url("/assets/icons/michael-work.svg");
  -webkit-mask-image: url("/assets/icons/michael-work.svg");
}

.michael-link-icon--projects::after {
  content: none;
}

.michael-link-icon--work::after {
  background: var(--accent-secondary);
  mask-image: url("/assets/icons/michael-work-tick.svg");
  -webkit-mask-image: url("/assets/icons/michael-work-tick.svg");
}

.michael-link-icon--notes::before {
  mask-image: url("/assets/icons/studio-notes-top.svg");
  -webkit-mask-image: url("/assets/icons/studio-notes-top.svg");
}

.michael-link-icon--notes::after {
  background: var(--accent-secondary);
  mask-image: url("/assets/icons/studio-notes-bottom.svg");
  -webkit-mask-image: url("/assets/icons/studio-notes-bottom.svg");
}

/* The Notes glyph's first visible stroke begins lower in its view box. */
.michael-link-icon--notes,
.studio-category-icon.studio-category-icon--notes {
  margin-top: -0.25rem;
}

.michael-link-icon--projects::before {
  background: var(--accent);
  mask-image: url("/assets/icons/michael-projects.svg");
  -webkit-mask-image: url("/assets/icons/michael-projects.svg");
}

.michael-link-copy {
  display: grid;
  justify-items: start;
  gap: 0.22rem;
}

.michael-link-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1;
}

.michael-link-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
}

.michael-link-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.michael-link-title > span[aria-hidden="true"] {
  color: var(--accent-secondary);
  font-family: var(--serif);
  font-size: var(--up-right-arrow-size);
  line-height: 0.8;
  opacity: 0;
  transform: translate(-0.35rem, 0.15rem);
  transition: opacity var(--motion), transform var(--motion);
}

.coming-soon-status {
  color: var(--muted);
  font-size: 0.58em;
  font-weight: 400;
  text-transform: lowercase;
}

.michael-links small {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.michael-links a:hover,
.michael-links a:focus-visible,
.michael-link--coming-soon:hover {
  color: var(--accent);
}

.michael-links a:hover .michael-link-text::after,
.michael-links a:focus-visible .michael-link-text::after,
.michael-link--coming-soon:hover .michael-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.michael-links a:hover .michael-link-title > span[aria-hidden="true"],
.michael-links a:focus-visible .michael-link-title > span[aria-hidden="true"] {
  opacity: 1;
  transform: translate(0, 0);
}

.michael-badge.shot {
  width: min(13.5rem, 100%);
  justify-self: start;
}

.michael-journey {
  width: min(34rem, 100%);
}

.michael-journey-header {
  display: grid;
  gap: 0.55rem;
}

.michael-journey > .michael-journey-header {
  margin-bottom: var(--space-heading-body);
}

.michael-journey-header .kicker {
  font-family: var(--code);
  font-size: var(--menu-kicker-size);
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.35;
  margin-bottom: 0;
}

.michael-journey-header h2 {
  font-family: var(--code);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.25;
}

.michael-journey-header > p:last-child:not(.kicker) {
  color: var(--muted);
  font-family: var(--serif);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: none;
}

.michael-journey-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(1rem, 4vw, 1.5rem);
}

.michael-journey-item .michael-journey-header {
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.michael-journey-grid .michael-badge.shot {
  width: 100%;
  aspect-ratio: 3 / 4;
}

.michael-journey-grid .michael-badge img {
  height: 100%;
  object-fit: cover;
}

.michael-along-way-copy {
  display: grid;
  gap: var(--space-heading-body);
  margin-bottom: var(--space-section-tight);
}

.michael-along-way-copy > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.michael-along-way-privacy {
  margin-top: var(--space-section-tight);
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

.work-entry {
  display: grid;
  justify-items: start;
  gap: 0.55rem;
  padding: clamp(1.35rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border);
}

.work-entry .work-meta {
  margin: 0;
  color: var(--muted);
}

.work-entry-title {
  margin: 0;
  font-family: var(--code);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}

.work-entry-title a {
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: color var(--motion);
}

.work-entry-link-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
}

.work-entry-link-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.work-entry-link-arrow {
  color: var(--accent-secondary);
  font-family: var(--serif);
  font-size: var(--up-right-arrow-size);
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translate(-0.35rem, 0.15rem);
  transition: opacity var(--motion), transform var(--motion);
}

.work-entry-title a:hover,
.work-entry-title a:focus-visible {
  color: var(--accent);
}

.work-entry-title a:hover .work-entry-link-text::after,
.work-entry-title a:focus-visible .work-entry-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.work-entry-title a:hover .work-entry-link-arrow,
.work-entry-title a:focus-visible .work-entry-link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.work-entry > p:last-child {
  max-width: 42rem;
  margin: 0;
}

.work-content p,
.work-content ul {
  margin-bottom: var(--space-paragraph);
}

.work-content h2 {
  margin: var(--space-section-tight) 0 var(--space-heading-body);
}

.about-preview,
.michael-preview {
  width: min(var(--content), 100%);
  padding-top: 0;
}

.about-section,
.about-prose {
  width: min(var(--content), 100%);
}

.about-prose {
  display: grid;
  gap: var(--space-paragraph);
}

.about-prose p + p,
.about-block p + p {
  margin-top: 0;
}

.about-block {
  display: grid;
  gap: var(--space-heading-body);
}

.about-block h2.kicker {
  color: var(--accent);
  font-size: var(--menu-kicker-size);
  font-weight: 400;
  line-height: 1.35;
}

.interest-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 0.45rem;
  padding: 0;
  list-style: none;
}

.interest-list li {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--muted);
  font-family: var(--code);
  font-size: 12px;
  line-height: 1;
}

.family-lab-sign {
  width: min(260px, 100%);
  height: auto;
  margin-block: 0;
  border: 1.5px solid var(--border-strong);
  border-radius: 12px;
}

/* Hub pages share the shell but use their own working grammar. */
.hub-page {
  --home-flow-gap: 2.5rem;
}

.hub-page .site-header {
  /* Match About's responsive wordmark-to-hero breathing room. */
  margin-bottom: var(--space-header-bottom);
}

.michael-page .site-header {
  margin-bottom: var(--space-header-bottom);
}

.hub-intro {
  max-width: 46rem;
  margin-bottom: var(--home-flow-gap);
}

/* The main grid supplies the default section rhythm. Offset it after a
   non-home hero so its following content uses the tighter hero rhythm. */
.site-main > .page-intro,
.site-main > .profile-grid {
  margin-bottom: calc(var(--space-hero-bottom) - var(--space-section));
}

.hub-intro h1 {
  max-width: 12.5ch;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
}

.michael-page .michael-content h1 {
  max-width: 12.5ch;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
}

.hub-intro--lab .lab-quote {
  max-width: none;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
  margin-bottom: var(--space-heading-body);
}

.hub-intro--studio .studio-quote {
  max-width: none;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
  font-style: italic;
  margin-bottom: var(--space-heading-body);
}

.hub-intro--workshop .workshop-quote {
  max-width: none;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
  font-style: italic;
  margin-bottom: var(--space-heading-body);
}

.page-intro .notes-quote {
  max-width: none;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
  font-style: italic;
  margin-bottom: 0;
}

.page-intro .projects-quote {
  max-width: none;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
  font-style: italic;
  margin-bottom: 0;
}

.page-intro .work-quote {
  max-width: none;
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
  font-style: italic;
  margin-bottom: 0;
}

.michael-content .michael-quote {
  font-style: italic;
  margin-bottom: 0;
}

.quote-trigger {
  cursor: pointer;
}

.quote-trigger:focus-visible {
  outline: 2px solid var(--accent-secondary);
  outline-offset: 0.16em;
}

.quote-attribution {
  display: block;
  margin-top: 0.14em;
  color: var(--muted);
  font-family: var(--code);
  font-size: 0.32em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  opacity: 0;
  transform: translateY(-0.08em);
  transition: opacity var(--motion), transform var(--motion);
  visibility: hidden;
  white-space: nowrap;
}

.quote-trigger:focus-visible .quote-attribution,
.quote-trigger[aria-expanded="true"] .quote-attribution {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
}

@media (hover: hover) {
  .quote-trigger:hover .quote-attribution {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

/* About uses the same restrained hub-title scale while retaining its own copy. */
.about-page .page-intro h1 {
  font-size: clamp(2.3rem, 5.5vw, 2.6rem);
}

@media (min-width: 721px) {
  .hub-intro h1 {
    max-width: none;
  }

  .michael-page .michael-content h1 {
    max-width: none;
  }
}

.lab-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.lab-module {
  min-height: 12.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(1.1rem, 2vw, 1.65rem);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: color var(--motion), background-color var(--motion), transform var(--motion);
}

.lab-module:hover,
.lab-module:focus-visible {
  color: var(--accent);
  background: var(--surface);
  transform: translateY(-2px);
}

.lab-module .row-meta {
  margin: 0.35rem 0 0.7rem;
}

.lab-module-heading {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0;
}

.lab-module-title {
  display: block;
  margin: 0;
  font-family: var(--code);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 500;
  line-height: 1.05;
}

.lab-module-icon {
  position: relative;
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 auto;
  margin-top: 0;
  background: var(--accent);
  mask: url("/assets/icons/brick.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/brick.svg") center / contain no-repeat;
}

.lab-module-icon--voice { mask-image: url("/assets/icons/project-voice.svg"); -webkit-mask-image: url("/assets/icons/project-voice.svg"); }
.lab-module-icon--library { mask-image: url("/assets/icons/project-library.svg"); -webkit-mask-image: url("/assets/icons/project-library.svg"); }
.lab-module-icon--circles { mask-image: url("/assets/icons/project-circles.svg"); -webkit-mask-image: url("/assets/icons/project-circles.svg"); }
.lab-module-icon--dictionary { mask-image: url("/assets/icons/project-dictionary.svg"); -webkit-mask-image: url("/assets/icons/project-dictionary.svg"); }
.lab-module-icon--chess { mask-image: url("/assets/icons/project-chess.svg"); -webkit-mask-image: url("/assets/icons/project-chess.svg"); }
.lab-module-icon--assist { mask-image: url("/assets/icons/project-assist.svg"); -webkit-mask-image: url("/assets/icons/project-assist.svg"); }
.lab-module-icon--black-onion { mask-image: url("/assets/icons/project-black-onion.svg"); -webkit-mask-image: url("/assets/icons/project-black-onion.svg"); }
.lab-module-icon--liquid-bonsai { mask-image: url("/assets/icons/project-liquid-bonsai.svg"); -webkit-mask-image: url("/assets/icons/project-liquid-bonsai.svg"); }
.lab-module-icon--wordsprout { background: var(--accent-secondary); mask-image: url("/assets/icons/project-wordsprout.svg"); -webkit-mask-image: url("/assets/icons/project-wordsprout.svg"); }

.project-link-icon--voice::after,
.project-link-icon--library::after,
.project-link-icon--circles::after,
.project-link-icon--dictionary::after,
.project-link-icon--wordsprout::after,
.lab-module-icon--voice::after,
.lab-module-icon--library::after,
.lab-module-icon--circles::after,
.lab-module-icon--dictionary::after,
.lab-module-icon--wordsprout::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-secondary);
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.project-link-icon--voice::after,
.lab-module-icon--voice::after { mask-image: url("/assets/icons/project-voice-waves.svg"); -webkit-mask-image: url("/assets/icons/project-voice-waves.svg"); }
.project-link-icon--library::after,
.lab-module-icon--library::after { mask-image: url("/assets/icons/project-library-circle.svg"); -webkit-mask-image: url("/assets/icons/project-library-circle.svg"); }
.project-link-icon--circles::after,
.lab-module-icon--circles::after { mask-image: url("/assets/icons/project-circles-center.svg"); -webkit-mask-image: url("/assets/icons/project-circles-center.svg"); }
.project-link-icon--dictionary::after,
.lab-module-icon--dictionary::after { mask-image: url("/assets/icons/project-dictionary-lines.svg"); -webkit-mask-image: url("/assets/icons/project-dictionary-lines.svg"); }
.project-link-icon--wordsprout::after,
.lab-module-icon--wordsprout::after { background: var(--accent); mask-image: url("/assets/icons/project-wordsprout-front.svg"); -webkit-mask-image: url("/assets/icons/project-wordsprout-front.svg"); }

.project-link-icon--assist::after,
.lab-module-icon--assist::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-secondary);
  mask: url("/assets/icons/project-assist-blue.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/project-assist-blue.svg") center / contain no-repeat;
}

.project-link-icon--black-onion::after,
.lab-module-icon--black-onion::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-secondary);
  mask: url("/assets/icons/project-black-onion-corners.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/project-black-onion-corners.svg") center / contain no-repeat;
}

.project-link-icon--liquid-bonsai::after,
.lab-module-icon--liquid-bonsai::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-blue-text);
  mask: url("/assets/icons/project-liquid-bonsai-mountains.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/project-liquid-bonsai-mountains.svg") center / contain no-repeat;
}

.lab-module p {
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.35;
}

.studio-categories {
  max-width: 56rem;
  border-top: 1px solid var(--border);
}

.studio-category {
  display: grid;
  grid-template-columns: minmax(3rem, 10vw) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.35rem, 3vw, 2.25rem) 0;
  border-bottom: 1px solid var(--border);
}

.studio-category-icon {
  width: var(--link-icon-size);
  height: var(--link-icon-size);
  align-self: start;
  margin-top: 0;
  position: relative;
}

.studio-category-icon::before,
.studio-category-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  mask: center / contain no-repeat;
  -webkit-mask: center / contain no-repeat;
}

.studio-category-icon::before { background: var(--accent); }
.studio-category-icon::after { background: var(--accent-secondary); }

.studio-category-icon--notes::before { mask-image: url("/assets/icons/studio-notes-top.svg"); -webkit-mask-image: url("/assets/icons/studio-notes-top.svg"); }
.studio-category-icon--notes::after { mask-image: url("/assets/icons/studio-notes-bottom.svg"); -webkit-mask-image: url("/assets/icons/studio-notes-bottom.svg"); }
.studio-category-icon--podcasts::before { background: var(--accent-secondary); mask-image: url("/assets/icons/studio-podcasts-mic.svg"); -webkit-mask-image: url("/assets/icons/studio-podcasts-mic.svg"); }
.studio-category-icon--podcasts::after { background: var(--accent); mask-image: url("/assets/icons/studio-podcasts-rings.svg"); -webkit-mask-image: url("/assets/icons/studio-podcasts-rings.svg"); }
.studio-category-icon--sketches::before { background: var(--accent-secondary); mask-image: url("/assets/icons/studio-thread-line.svg"); -webkit-mask-image: url("/assets/icons/studio-thread-line.svg"); }
.studio-category-icon--sketches::after { background: var(--accent); mask-image: url("/assets/icons/studio-thread-dot.svg"); -webkit-mask-image: url("/assets/icons/studio-thread-dot.svg"); }

.studio-category-icon--sketches {
  margin-top: -0.05rem;
}

.studio-category-copy { display: grid; justify-items: start; gap: 0.8rem; }
.studio-category .kicker { margin: 0; font-weight: 400; }

.studio-category-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--text);
  font-family: var(--code);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.studio-category-link-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
}

.studio-category-link-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.studio-category-link-arrow {
  color: var(--accent-secondary);
  font-family: var(--serif);
  font-size: var(--up-right-arrow-size);
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translate(-0.35rem, 0.15rem);
  transition: opacity var(--motion), transform var(--motion);
}

.studio-category-link:hover,
.studio-category-link:focus-visible,
.studio-category--future:hover .studio-category-link {
  color: var(--accent);
}

.studio-category-link:hover .studio-category-link-text::after,
.studio-category-link:focus-visible .studio-category-link-text::after,
.studio-category--future:hover .studio-category-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.studio-category-link:hover .studio-category-link-arrow,
.studio-category-link:focus-visible .studio-category-link-arrow,
.studio-category--future:hover .studio-category-link-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.studio-category-summary {
  max-width: 30rem;
  margin: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 400;
  line-height: 1.08;
}

.studio-latest { width: 100%; max-width: 38rem; margin-top: 0.55rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
.studio-latest .kicker { margin: 0 0 0.55rem; }
.studio-latest ul { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.studio-latest a { color: var(--text); font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.15rem); line-height: 1.3; text-decoration-color: var(--accent-secondary); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
.studio-latest a:hover, .studio-latest a:focus-visible { color: var(--accent); }
.studio-category--future { color: var(--muted); }

.podcast-link-icon {
  position: relative;
  width: var(--link-icon-size);
  height: var(--link-icon-size);
  align-self: start;
  margin-top: 0;
}

.podcast-link-icon::before,
.podcast-link-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  mask: url("/assets/icons/podcast-conversation.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/podcast-conversation.svg") center / contain no-repeat;
}

.podcast-link-icon::before {
  background: var(--accent);
}

.podcast-link-icon::after {
  background: var(--accent-secondary);
  clip-path: inset(0 50% 0 0);
}

.podcast-player {
  width: min(100%, 42rem);
  margin: var(--space-section-tight) 0;
}

.podcast-player audio {
  display: block;
  width: 100%;
  min-height: 44px;
}

.podcast-related-note {
  margin-top: var(--space-section-tight);
}

.workshop-origin {
  max-width: 43rem;
}

.workshop-artifact {
  position: relative;
  width: min(17.5rem, 100%);
  margin: 1.4rem 0 1.5rem;
  padding: 0.35rem;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  box-shadow: 0.25rem 0.35rem 0 rgba(19, 19, 19, 0.12);
}

.workshop-artifact::before,
.workshop-artifact::after {
  content: "";
  position: absolute;
  top: -0.24rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent-secondary);
  box-shadow: 0 0 0 1px var(--bg);
}

.workshop-artifact::before { left: 1rem; background: var(--accent); }
.workshop-artifact::after { right: 1rem; }

.workshop-artifact .family-lab-sign {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 0;
}

.workshop-origin-copy .kicker {
  margin: 0 0 0.8rem;
}

.workshop-origin-copy h2 {
  margin: 0 0 1.25rem;
  font-family: var(--serif);
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.03;
}

.workshop-story p {
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.48;
}

.workshop-contact {
  width: min(39rem, 100%);
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  padding-top: var(--space-section-tight);
  border-top: 1px solid var(--border);
}

.workshop-contact__intro {
  display: grid;
  gap: 0.8rem;
}

.workshop-contact__intro .kicker {
  margin: 0;
}

.workshop-contact__intro h2 {
  max-width: 20ch;
  font-size: clamp(1.65rem, 4vw, 2.25rem);
  font-weight: 450;
  line-height: 1.16;
}

.workshop-contact__intro > p:last-child {
  max-width: 35rem;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.5;
}

.contact-form {
  display: grid;
  gap: 1.15rem;
}

.contact-form__field {
  display: grid;
  gap: 0.42rem;
}

.contact-form label {
  font-family: var(--code);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.3;
  text-transform: uppercase;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font-family: var(--code);
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  font-weight: 400;
  line-height: 1.55;
  padding: 0.62rem 0.72rem;
}

.contact-form textarea {
  min-height: 9rem;
  resize: vertical;
}

.contact-form__turnstile {
  width: 300px;
  max-width: 100%;
  margin-block: 0.2rem 0.35rem;
}

@media (max-width: 360px) {
  .contact-form__turnstile {
    width: calc(100% / 0.9);
    max-width: none;
    margin-bottom: -0.4rem;
    transform: scale(0.9);
    transform-origin: top left;
  }
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent-secondary);
}

.contact-form__footer {
  display: grid;
  justify-items: start;
  gap: 0.65rem;
  padding-top: 0.2rem;
}

.contact-form__submit {
  min-height: 44px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: var(--accent);
  color: var(--bg);
  cursor: pointer;
  font-family: var(--code);
  font-size: 0.84rem;
  letter-spacing: 0.02em;
  padding: 0.48rem 0.85rem;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion);
}

.contact-form__submit:hover,
.contact-form__submit:focus-visible {
  border-color: var(--accent-secondary);
  background: var(--accent-secondary);
  color: var(--brand-ink);
}

.contact-form__submit:disabled {
  cursor: wait;
  opacity: 0.68;
}

.contact-form__status {
  min-height: 1.5em;
  color: var(--muted);
  font-family: var(--code);
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-form__status[data-status="success"] {
  color: var(--accent-secondary);
}

.contact-form__status[data-status="error"] {
  color: var(--accent);
}

.contact-form__privacy-notice {
  margin: 0;
  max-width: 38rem;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.contact-form__honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .lab-module {
    min-height: 9.75rem;
  }

  .workshop-artifact {
    width: min(16rem, 100%);
    margin-top: 0;
  }
}


.people-section {
  width: min(var(--wide), 100%);
  display: grid;
  gap: var(--space-heading-body);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 28px);
}

.person {
  --person-portrait-size: 132px;
  display: grid;
  gap: 0.7rem;
  align-content: start;
}

.person img {
  width: var(--person-portrait-size);
  height: var(--person-portrait-size);
  object-fit: cover;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
}

.person-portrait {
  position: relative;
  display: block;
  width: var(--person-portrait-size);
  height: var(--person-portrait-size);
  border-radius: 50%;
  transition: transform var(--motion);
}

.person-portrait::before {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1.5px solid var(--accent);
  border-left-color: var(--accent-secondary);
  border-radius: inherit;
  opacity: 0;
  transform: rotate(-30deg) scale(0.88);
  transition: opacity var(--motion), transform 280ms ease;
}

.person-portrait::after {
  content: "";
  position: absolute;
  top: -3px;
  right: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-secondary);
  box-shadow: 0 0 0 2px var(--bg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--motion), transform var(--motion);
}

.person-portrait:hover,
.person-portrait:focus-visible {
  transform: translateY(-2px);
}

.person-portrait:hover::before,
.person-portrait:focus-visible::before {
  opacity: 1;
  transform: rotate(12deg) scale(1);
}

.person-portrait:hover::after,
.person-portrait:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}

.person-portrait:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 7px;
}

.person h3 {
  width: var(--person-portrait-size);
  margin: 0;
  font-size: 1.1rem;
  font-weight: 400;
  line-height: 1.25;
  text-align: center;
}

.person-role {
  width: var(--person-portrait-size);
  color: var(--muted);
  font-family: var(--code);
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.person > p:not(.person-role) {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.person .nav-link,
.person .inline-action {
  justify-self: start;
  margin-top: 0;
}

.lab-footer-memory {
  width: 100%;
  margin: var(--space-section-tight) 0;
  color: var(--muted);
}

.about-preview > .inline-action {
  margin-top: 0;
}

.lab-footer-workshop-group {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: calc((clamp(78px, 13vw, 98px) + var(--space-heading-body) * 2) * 2 / 3);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 0 var(--space-heading-body);
}

.lab-footer-workshop-group::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, var(--brand-cream) 65%, transparent) 0%,
    color-mix(in srgb, var(--brand-cream) 35%, transparent) 40%,
    transparent 72%
  );
  filter: blur(6px);
}

.lab-footer-tool-logo {
  display: block;
  /* Scale the drawing with its frame, retaining its native ratio. */
  width: calc(clamp(78px, 13vw, 98px) * 703 / 1086 * 2 / 3);
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.lab-footer-line {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.lab-heart {
  color: var(--accent-orange-text);
}


.inline-action,
.nav-link,
.back-link,
.primary-action,
.pill-link {
  margin-top: var(--space-heading-body);
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.inline-action::after,
.back-link::before,
.primary-action::after,
.pill-link::before,
.pill-link::after {
  font-family: system-ui, sans-serif;
  font-size: 1.05em;
  line-height: 1;
  color: var(--accent);
  opacity: 0.85;
  transition: transform 180ms ease, opacity 180ms ease;
}

.inline-action::after,
.primary-action::after,
.pill-link::after {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  mask: url("/assets/icons/arrow-forward.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/arrow-forward.svg") center / contain no-repeat;
}

.inline-action,
.nav-link,
.back-link {
  position: relative;
  justify-content: flex-start;
}

.inline-action::before,
.nav-link::before,
.back-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.inline-action:hover,
.inline-action:focus-visible,
.nav-link:hover,
.nav-link:focus-visible,
.back-link:hover,
.back-link:focus-visible {
  color: var(--accent-secondary);
}

.inline-action:hover::before,
.inline-action:focus-visible::before,
.nav-link:hover::before,
.nav-link:focus-visible::before,
.back-link:hover::after,
.back-link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.pill-link::before {
  content: none;
}

.back-link::before {
  content: "";
  display: inline-block;
  position: static;
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  background: currentColor;
  mask: url("/assets/icons/arrow-back.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/arrow-back.svg") center / contain no-repeat;
}

.pill-link-back::after,
.back-link.pill-link::after {
  content: none;
}

.inline-action:hover::after,
.inline-action:focus-visible::after,
.primary-action:hover::after,
.primary-action:focus-visible::after,
.pill-link:hover::after,
.pill-link:focus-visible::after {
  opacity: 1;
  transform: translateX(2px);
}

/* Right-arrow links share the home navigation's editorial treatment. */
.inline-action {
  gap: 0.45rem;
  font-size: 1rem;
  line-height: 1;
}

.inline-action::before {
  content: none;
}

.inline-action-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
}

.inline-action-text::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.inline-action::after {
  content: "↗";
  width: auto;
  height: auto;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--accent-secondary);
  font-family: var(--serif);
  font-size: var(--up-right-arrow-size);
  font-weight: 300;
  opacity: 0;
  transform: translate(-0.35rem, 0.15rem);
}

.inline-action:hover .inline-action-text::before,
.inline-action:focus-visible .inline-action-text::before {
  transform: scaleX(1);
  transform-origin: left;
}

.inline-action:hover,
.inline-action:focus-visible {
  color: var(--accent);
}

.inline-action:hover::after,
.inline-action:focus-visible::after {
  opacity: 1;
  transform: translate(0, 0);
}

.back-link::after {
  content: none;
}

.back-link-text {
  position: relative;
  display: inline-flex;
  padding-bottom: 0.28rem;
}

.back-link-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--accent-secondary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--accent);
}

.back-link:hover .back-link-text::after,
.back-link:focus-visible .back-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.back-link:hover::before,
.back-link:focus-visible::before,
.pill-link-back:hover::before,
.pill-link-back:focus-visible::before {
  opacity: 1;
  transform: translateX(-2px);
}

/* Compact back navigation follows the image lightbox control treatment. */
.back-link {
  justify-content: flex-start;
  align-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  gap: 0;
  padding: 0;
  transition: background-color var(--motion), transform var(--motion);
}

.back-link::before {
  position: relative;
  width: 24px;
  height: 24px;
  background: currentColor;
  color: inherit;
  opacity: 1;
  transform: none;
}

.back-link-text {
  position: absolute;
  top: 50%;
  left: 1.75rem;
  width: max-content;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  font-family: var(--code);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(-0.3rem, -50%);
  transition: opacity var(--motion), transform var(--motion);
}

.back-link-text::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  background: var(--utility-hover);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 210ms ease;
}

.back-link:hover,
.back-link:focus-visible {
  background: transparent;
  color: var(--utility-hover);
  transform: translateX(-1px);
}

.back-link:hover::before,
.back-link:focus-visible::before {
  transform: translateX(-2px);
}

.back-link:hover .back-link-text,
.back-link:focus-visible .back-link-text {
  color: var(--text);
  opacity: 1;
  transform: translate(0, -50%);
}

.back-link:hover .back-link-text::after,
.back-link:focus-visible .back-link-text::after {
  transform: scaleX(1);
  transform-origin: left;
}


.subnav {
  width: min(var(--content), 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.michael-subnav {
  margin-top: var(--space-heading-body);
}

.michael-subnav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-family: var(--code);
  font-size: 12px;
  line-height: 1;
  padding: 0 10px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color var(--motion), border-color var(--motion), color var(--motion), transform var(--motion);
}

.michael-subnav a:hover,
.michael-subnav a:focus-visible {
  border-color: var(--border-strong);
  background: var(--accent-soft);
  color: var(--accent);
  transform: translateY(-1px);
}

.primary-action,
.pill-link {
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0 15px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.primary-action:hover,
.primary-action:focus-visible,
.pill-link:hover,
.pill-link:focus-visible {
  background: var(--accent-soft);
  border-color: var(--border-strong);
  color: var(--accent);
}

.article-header,
.project-header,
.work-header {
  display: grid;
  gap: var(--kicker-title-gap);
  margin-bottom: var(--space-hero-bottom);
  min-width: 0;
  max-width: 100%;
}

.article-title {
  max-width: 100%;
  overflow-wrap: break-word;
}

.article-content p,
.article-content ul,
.project-content p,
.project-content ul {
  margin-bottom: var(--space-paragraph);
  min-width: 0;
  max-width: 100%;
}

.article-header > .kicker,
.project-header > .kicker,
.work-header > .kicker {
  margin: 0;
}

.project-content h2 {
  margin: var(--space-section-tight) 0 var(--space-heading-body);
}

.article-content strong,
.article-content b {
  font-weight: inherit;
}

.article-content code,
.inline-code {
  font-family: var(--code);
  font-size: 0.92em;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  padding: 0.08em 0.34em;
}

.note-figure {
  width: min(100%, 640px);
  aspect-ratio: 3741 / 2120;
  margin: var(--space-section-tight) 0;
  overflow: hidden;
}

.note-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.note-figure-outline {
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
}

.note-figure-no-outline {
  border: 0;
}

.article-signoff {
  margin-top: var(--space-section-tight);
  font-family: var(--code);
  font-size: 0.92rem;
}

.article-signoff span {
  font-family: var(--serif);
  font-style: italic;
}

.project-topline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: var(--space-heading-body) 0 0;
  min-width: 0;
  max-width: 100%;
}

.project-header > .inline-action {
  justify-self: start;
  text-transform: uppercase;
}

.project-launch-container {
  margin: calc(var(--space-hero-bottom) - var(--kicker-title-gap)) 0 var(--space-hero-bottom);
}

.project-header:has(+ .project-launch-container) {
  margin-bottom: 0;
}

.project-launch-container .project-launch {
  min-height: 0;
  gap: 0.45rem;
  padding: 0.15rem 0;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.meta-pill,
.project-chip {
  font-family: var(--code);
  font-size: 12px;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 11px;
  color: var(--muted);
  cursor: default;
}

.shot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shot {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--border-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  cursor: zoom-in;
}

.shot-grid a {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.shot img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

.project-built-with {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: var(--space-section-tight);
  padding-top: var(--space-heading-body);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--code);
  font-size: 12px;
  line-height: 1.55;
}

.project-built-with-label {
  margin-bottom: 0.25rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.project-built-with-list {
  overflow-wrap: anywhere;
}

.profile-grid {
  width: min(var(--wide), 100%);
  display: grid;
  grid-template-columns: minmax(0, var(--content)) minmax(210px, 300px);
  align-items: start;
  gap: clamp(28px, 5vw, 54px);
}

.profile-photo {
  margin: 0;
  justify-self: start;
  border: 1.5px solid var(--border-strong);
  border-radius: 10px;
  overflow: hidden;
}

.profile-photo.michael-profile-photo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  background: var(--surface);
}

.michael-profile {
  width: min(18rem, 100%);
  justify-self: start;
}

.michael-profile-caption {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-footer {
  margin-top: var(--space-footer-top);
  padding-top: var(--space-heading-body);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--code);
  font-size: 12px;
}

.site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-credit-compact {
  display: none;
}

.footer-credit-full a:hover,
.footer-credit-full a:focus-visible {
  color: inherit;
  text-decoration-color: transparent;
}

.footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: var(--text);
}

.footer-actions .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.footer-elel-link {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.footer-elel-mark {
  width: var(--footer-elel-mark-size);
  height: var(--footer-elel-mark-size);
  flex: 0 0 auto;
  background: currentColor;
  mask: url("/assets/e_dot_no_bg.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/e_dot_no_bg.svg") center / contain no-repeat;
  transition: transform 220ms ease, background-color var(--motion), opacity 220ms ease;
}

.footer-elel-link:hover,
.footer-elel-link:focus-visible {
  color: var(--utility-hover);
}

.footer-elel-link:hover .footer-elel-mark,
.footer-elel-link:focus-visible .footer-elel-mark {
  transform: rotate(-6deg) translateY(-1px);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(10, 10, 10, 0.84);
}

.lightbox[aria-hidden="false"] {
  display: flex;
}

.lightbox img {
  width: auto;
  height: auto;
  max-width: min(calc(100vw - 44px), 1100px);
  max-height: calc(100vh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  object-fit: contain;
  border: 1px solid rgba(255, 251, 238, 0.55);
  border-radius: 8px;
  background: #111;
}

.lightbox button {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
  transform: translateX(-50%);
  transition: color var(--motion), transform var(--motion);
}

.lightbox button::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg);
  transform: translate(-50%, -50%);
}

.lightbox button::after {
  content: "";
  position: relative;
  z-index: 1;
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: url("/assets/icons/close.svg") center / contain no-repeat;
  -webkit-mask: url("/assets/icons/close.svg") center / contain no-repeat;
}

.lightbox button:hover,
.lightbox button:focus-visible {
  color: var(--utility-hover);
  transform: translateX(-50%) translateY(-1px);
}

.lightbox button:focus-visible {
  outline: 2px solid rgba(255, 251, 238, 0.72);
  outline-offset: 3px;
}

html.fonts-loading body {
  opacity: 0;
}

html[data-motion="enhanced"] [data-animate-page] > * {
  animation: page-rise 520ms ease both;
}

html[data-motion="enhanced"] [data-animate-page] > *:nth-child(2) {
  animation-delay: 80ms;
}

html[data-motion="enhanced"] [data-animate-page] > *:nth-child(3) {
  animation-delay: 140ms;
}

html[data-motion="enhanced"] .home-title-accent::after {
  animation: home-title-underline 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 420ms;
}

html[data-motion="enhanced"] .home-title-accent--blue::after {
  animation-delay: 840ms;
}

@keyframes page-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes home-title-underline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}


.content-section {
  display: grid;
  gap: var(--space-heading-body);
}

.content-section__label,
.about-block > .kicker {
  margin: 0;
  font-weight: 400;
}

.content-section__body {
  display: grid;
  gap: var(--space-paragraph);
  min-width: 0;
}

.content-section__body > * {
  margin-block: 0;
}

.article-content :where(p, ul, ol),
.project-content :where(p, ul, ol),
.work-content :where(p, ul, ol) {
  margin-top: 0;
  margin-bottom: var(--space-paragraph);
}

.article-content :where(ul, ol),
.project-content :where(ul, ol),
.work-content :where(ul, ol) {
  padding-inline-start: 1.5em;
}

.article-content > :last-child,
.project-content > :last-child,
.work-content > :last-child,
.project-content > section > :last-child {
  margin-bottom: 0;
}

:is(.article-header, .project-header, .work-header) > :is(p, h1, a, .project-summary, .project-topline) {
  margin-block: 0;
}

:is(.article-header, .project-header, .work-header) > h1 + :is(p, .project-summary, .project-topline) {
  margin-top: calc(var(--space-heading-body) - var(--kicker-title-gap));
}

.project-content > section + section {
  margin-top: var(--space-section-tight);
}

.project-content > section > h2:first-child,
.article-header + h2,
.work-header + h2 {
  margin-top: 0;
}

.about-preview > div + p,
.michael-preview > div + p {
  margin-top: var(--space-heading-body);
}

.site-main > .subnav > .back-link {
  margin-top: 0;
}

.site-main > .subnav {
  margin-top: calc(var(--space-section-tight) - var(--space-section));
  margin-bottom: calc(var(--space-section-tight) - var(--space-footer-top));
}

@media (max-width: 720px) {
  :root {
    --hero-page-size: clamp(2.05rem, 10vw, 2.8rem);
    --hero-detail-size: clamp(1.95rem, 9.2vw, 2.65rem);
  }

  .site-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: var(--space-header-bottom);
  }

  .has-mobile-menu .site-header {
    flex-wrap: nowrap;
  }

  .has-mobile-menu .menu-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--motion), transform var(--motion), opacity var(--motion);
  }

  .has-mobile-menu .menu-toggle::before {
    content: "";
    width: 30px;
    height: 30px;
    background: currentColor;
    mask: url("/assets/icons/menu-add.svg") center / contain no-repeat;
    -webkit-mask: url("/assets/icons/menu-add.svg") center / contain no-repeat;
    transform: rotate(0deg) scale(1);
    transition: transform 260ms ease;
  }

  .has-mobile-menu .site-header.is-menu-open .menu-toggle::before {
    mask-image: url("/assets/icons/menu-remove.svg");
    -webkit-mask-image: url("/assets/icons/menu-remove.svg");
    transform: rotate(180deg) scale(0.94);
  }

  .has-mobile-menu .menu-toggle:hover,
  .has-mobile-menu .menu-toggle:focus-visible {
    color: var(--accent);
    transform: translateY(-1px);
  }

  .has-mobile-menu .site-header.is-menu-open .menu-toggle:hover,
  .has-mobile-menu .site-header.is-menu-open .menu-toggle:focus-visible {
    color: var(--accent-secondary);
  }

  .has-mobile-menu .menu-toggle:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }

  .has-mobile-menu .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    left: calc(-1 * var(--gutter));
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-content: center;
    gap: 0;
    padding: 18px var(--gutter) 22px;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 220ms ease;
  }

  .has-mobile-menu .site-nav::after {
    content: "";
    position: absolute;
    right: var(--gutter);
    bottom: 0;
    left: var(--gutter);
    height: 1px;
    background: var(--border);
    pointer-events: none;
  }

  html.is-resizing.has-mobile-menu .site-nav {
    transition: none;
  }

  .has-mobile-menu .site-header.is-menu-open .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .has-mobile-menu .site-header.is-menu-navigating .site-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    transform: translateY(0);
    transition: none;
  }

  .has-mobile-menu .site-nav a,
  .has-mobile-menu .site-nav .theme-toggle {
    width: 100%;
    min-height: 48px;
    justify-content: flex-start;
    font-size: var(--menu-kicker-size);
  }

  .has-mobile-menu .site-nav a::after {
    content: none;
  }

  .has-mobile-menu .site-nav a:hover,
  .has-mobile-menu .site-nav a:focus-visible {
    text-decoration-line: underline;
    text-decoration-color: var(--accent-secondary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.32em;
  }

  .has-mobile-menu .site-nav a[aria-current="page"] {
    text-decoration-line: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.32em;
  }

  .note-link,
  .text-row {
    grid-template-columns: 1fr;
  }

  .projects-page .text-row {
    grid-template-columns: 2.65rem minmax(0, 1fr);
  }

  .shot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .note-summary {
    grid-column: auto;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .people-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    gap: clamp(2.5rem, 10vw, 3.5rem) clamp(1.25rem, 5vw, 2rem);
  }

  .person {
    width: 100%;
    justify-items: center;
  }

  .person > div {
    justify-self: center;
  }

  .lab-footer-memory {
    width: 100%;
  }

  .lab-footer-line {
    max-width: 28ch;
    margin-inline: 0;
  }

  .profile-photo {
    width: min(260px, 72vw);
    justify-self: start;
  }
}

@media (max-width: 430px) {
  body {
    font-size: 15px;
  }

  .site-page {
    --gutter: max(18px, calc(env(safe-area-inset-left) + 14px));
  }

  .site-nav {
    gap: 6px 9px;
  }

  .site-nav a,
  .inline-action,
  .nav-link,
  .back-link,
  .primary-action,
  .pill-link {
    font-size: 12px;
  }

  .site-footer-inner {
    gap: 10px;
  }

  .footer-credit-full {
    display: none;
  }

  .footer-credit-compact {
    display: inline;
    white-space: nowrap;
  }

}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }

  .brand-lockup:hover .brand-cube,
  .brand-lockup:focus-visible .brand-cube,
  .footer-elel-link:hover .footer-elel-mark,
  .footer-elel-link:focus-visible .footer-elel-mark,
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .menu-toggle:hover,
  .menu-toggle:focus-visible,
  .theme-toggle:hover,
  .theme-toggle:focus-visible,
  .showcase-arrow:hover,
  .showcase-arrow:focus-visible,
  .lightbox button:hover,
  .lightbox button:focus-visible,
  .inline-action:hover::after,
  .inline-action:focus-visible::after,
  .back-link:hover::before,
  .back-link:focus-visible::before,
  .primary-action:hover::after,
  .primary-action:focus-visible::after,
  .pill-link:hover::before,
  .pill-link:focus-visible::before,
  .pill-link:hover::after,
  .pill-link:focus-visible::after,
  .text-row:hover strong,
  .text-row:focus-visible strong {
    transform: none;
  }

  .has-mobile-menu .site-header.is-menu-open .menu-toggle::before {
    transform: none;
  }

  .lightbox button,
  .lightbox button:hover,
  .lightbox button:focus-visible {
    transform: translateX(-50%);
  }
}