:root {
  color-scheme: light;
  --bg: #f4f1ec;
  --surface: #e9e5de;
  --ink: #11110f;
  --muted: #5d5c56;
  --line: rgba(17, 17, 15, 0.2);
  --accent: #ff7f50;
  --acid: #008080;
  --heading-accent: #008080;
  --pink: #ffccd9;
  --orange: #ff7f50;
  --header-h: 76px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 6px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121210;
  --surface: #20201d;
  --ink: #f2efe8;
  --muted: #aba9a1;
  --line: rgba(242, 239, 232, 0.22);
  --accent: #ff7f50;
  --acid: #008080;
  --heading-accent: #008080;
  --pink: #6b2947;
  --orange: #ff7f50;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "TT Commons Pro Condensed", "TT Commons Pro", "TT Commons", "Avenir Next", Avenir, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  overflow-x: hidden;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
body.is-menu-open, body:has(dialog[open]) { overflow: hidden; }
img, video { display: block; max-width: 100%; }
button, a { color: inherit; }
button { font: inherit; }
a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  z-index: 1000;
  left: 12px;
  top: 12px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--bg);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  border-color: var(--line);
  backdrop-filter: blur(14px);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; }
.brand > span:first-child {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 13px;
}
.brand-full { font-size: 14px; }
.desktop-nav { display: flex; gap: 8px; font-size: 14px; }
.desktop-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 17px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.desktop-nav a:hover, .desktop-nav a:focus-visible {
  background: #111;
  color: #fff;
  transform: translateY(-1px);
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--ink); }
.theme-icon {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid currentColor;
  box-shadow: 7px -5px 0 -3px var(--bg), 7px -5px 0 -1px currentColor;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
[data-theme="dark"] .theme-icon { transform: rotate(145deg); box-shadow: 6px -4px 0 -3px var(--bg), 6px -4px 0 -1px currentColor; }
.menu-toggle { display: none; }
.menu-toggle > span, .menu-toggle > span::before {
  content: "";
  display: block;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform .3s;
}
.menu-toggle > span::before { transform: translateY(5px); }
.menu-toggle[aria-expanded="true"] > span { transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] > span::before { transform: rotate(90deg); }
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0;
  padding: 48px var(--gutter);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mobile-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  padding: 8px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: clamp(22px, 8vw, 38px);
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
.mobile-menu a:hover, .mobile-menu a:focus-visible,
.mobile-menu a:last-child {
  background: #111;
  border-color: #111;
  color: #fff;
}
.mobile-menu a:last-child { margin-top: auto; font-size: 16px; }

.hero {
  min-height: calc(100svh - 42px);
  position: relative;
  display: grid;
  align-content: center;
  overflow: hidden;
  padding: calc(var(--header-h) + 24px) var(--gutter) 76px;
  border-bottom: 1px solid var(--line);
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow span { color: var(--accent); }
.hero-title {
  width: min(100%, 1180px);
  margin: 0;
  font-size: clamp(68px, 13.5vw, 200px);
  font-weight: 800;
  line-height: .75;
  letter-spacing: 0;
}
.name-line { display: flex; }
.name-line-offset { margin-left: clamp(0px, 8vw, 110px); }
.name-line > span {
  display: inline-block;
  animation: letter-in .85s var(--ease) both;
}
.name-line > span:nth-child(2) { animation-delay: .04s; }
.name-line > span:nth-child(3) { animation-delay: .08s; }
.name-line > span:nth-child(4) { animation-delay: .12s; }
.name-line > span:nth-child(5) { animation-delay: .16s; }
.name-line > span:nth-child(6) { animation-delay: .2s; }
.name-line > span:nth-child(7) { animation-delay: .24s; }
@keyframes letter-in { from { opacity: 0; transform: translateY(80%) rotate(5deg); } to { opacity: 1; transform: none; } }
.hero-summary {
  width: min(570px, 47vw);
  margin: 42px 0 0 auto;
  position: relative;
  z-index: 2;
}
.hero-summary > p { margin: 0 0 24px; font-size: clamp(18px, 2vw, 28px); line-height: 1.25; }
.hero-actions { display: flex; align-items: center; gap: 26px; }
.button {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 50px;
  padding: 0 20px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.button-primary { background: #111; border-color: #111; color: #fff; }
.button:hover { transform: translateY(-1px); }
.button span, .text-link span { transition: transform .25s var(--ease); }
.button:hover span, .text-link:hover span { transform: translate(3px, -3px); }
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.text-link:hover, .text-link:focus-visible {
  background: #111;
  border-color: #111;
  color: #fff;
  transform: translateY(-1px);
}
.hero-art {
  position: absolute;
  z-index: 1;
  width: clamp(180px, 25vw, 390px);
  aspect-ratio: 3 / 4;
  right: 4vw;
  top: 12vh;
  transform: rotate(5deg);
  opacity: .84;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.hero-art img { width: 100%; height: 100%; object-fit: cover; }
.hero-foot {
  position: absolute;
  z-index: 3;
  bottom: 18px;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  text-transform: uppercase;
}
.hero-foot p { margin: 0; }


.section { padding: clamp(90px, 11vw, 160px) var(--gutter); }
.section-heading { display: grid; grid-template-columns: 1.6fr .6fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.section-heading h2, .impact h2, .about h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(48px, 7vw, 104px);
  line-height: .94;
  letter-spacing: 0;
}
.section-heading > p { max-width: 420px; margin: 0; font-size: 18px; }
.filters { display: flex; gap: 8px; margin-bottom: 28px; }
.filter {
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.filter {
  font-weight: 700;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.filter:hover { transform: translateY(-1px); }
.filter.is-active { background: #111; color: #fff; border-color: #111; }
.project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(42px, 7vw, 104px) clamp(20px, 4vw, 64px); }
.project { min-width: 0; transition: opacity .25s, transform .35s var(--ease); }
.project[aria-hidden="true"] { display: none; }
.project-featured, .project-creative { grid-column: 1 / -1; }
.project-open { width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.project-media { position: relative; display: block; overflow: hidden; border-radius: var(--radius); aspect-ratio: 4 / 5; }
.project-media-wide { aspect-ratio: 16 / 8; background: var(--surface); }
.project-media img, .project-media video { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--ease); }
.project-media-portrait img { padding: 8%; }
.project-open:hover .project-media img, .project-open:hover .project-media video { transform: scale(1.025); }
.project-meta { display: flex; justify-content: space-between; gap: 20px; padding-top: 16px; border-top: 1px solid var(--ink); }
.project-meta > span:first-child { display: grid; gap: 3px; }
.project-meta strong { font-size: clamp(20px, 2.2vw, 31px); line-height: 1.1; }
.project-meta small { color: var(--muted); font-size: 14px; }
.project-number { white-space: nowrap; font-weight: 700; }
.project-number i { display: inline-block; font-style: normal; transition: transform .25s; }
.project-open:hover .project-number i { transform: translate(3px, -3px); }
.orange-surface { background: var(--orange); }
.pink-surface { background: var(--pink); }
.green-surface { background: var(--accent); }
.project-media-video video { object-fit: cover; }
.creative-surface { background: var(--acid); }
[data-theme="dark"] .creative-surface { background: #050505; }
.project-creative .project-media img { padding: 6%; }

.impact { background: var(--ink); color: var(--bg); }
.impact-intro { display: flex; justify-content: space-between; gap: 48px; align-items: flex-start; margin-bottom: clamp(70px, 10vw, 130px); }
.impact-intro .eyebrow { max-width: 180px; }
.impact-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); }
.metric { min-width: 0; padding: 28px 28px 0 0; border-right: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); }
.metric + .metric { padding-left: 28px; }
.metric:last-child { border-right: 0; }
.metric-value { margin: 0 0 44px; color: var(--acid); font-size: clamp(54px, 6.5vw, 104px); font-weight: 800; line-height: 1; }
.metric h3 { margin: 0 0 12px; font-size: 18px; }
.metric > p:last-child { margin: 0; color: color-mix(in srgb, var(--bg) 72%, transparent); font-size: 14px; }

.about { display: block; }
.about-main { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(60px, 10vw, 150px); align-items: start; }
.about-sticky { position: sticky; top: calc(var(--header-h) + 36px); align-self: start; }
.about-sticky > p:not(.eyebrow) { max-width: 580px; margin: 32px 0 28px; font-size: clamp(18px, 2vw, 25px); line-height: 1.35; }
.career { border-top: 1px solid var(--line); }
.career-item { display: grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 26px 0 42px; border-bottom: 1px solid var(--line); }
.career-date { margin: 3px 0 0; color: var(--muted); font-size: 13px; text-transform: uppercase; }
.career-item h3 { margin: 0; font-size: clamp(25px, 2.6vw, 40px); line-height: 1.05; }
.career-item div > p:first-of-type { margin: 5px 0 18px; font-weight: 700; }
.career-item div > p:last-child { max-width: 560px; margin: 0; color: var(--muted); }
.capabilities { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(60px, 10vw, 150px); margin-top: 50px; padding-top: 50px; border-top: 1px solid var(--line); }
.capabilities h3 { margin: 0; font-size: 16px; text-transform: uppercase; }
.capabilities ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.capabilities li { padding: 10px 14px; border: 1px solid var(--line); border-radius: 999px; }

.contact {
  min-height: 88svh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px var(--gutter) 46px;
  background: var(--accent);
  color: #111;
  isolation: isolate;
}

.contact-inner { position: relative; z-index: 2; width: 100%; }
.contact h2 { margin: 0 0 48px; font-size: clamp(62px, 11vw, 170px); line-height: .82; letter-spacing: 0; }
.contact-email {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  min-height: 56px;
  padding: 8px 22px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: currentColor;
  font-size: clamp(18px, 2.4vw, 34px);
  font-weight: 700;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.contact-email:hover, .contact-email:focus-visible { background: #111; border-color: #111; color: #fff; }
.contact-meta { display: flex; gap: 32px; margin-top: 70px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, currentColor 42%, transparent); font-size: 13px; text-transform: uppercase; }
.contact-meta p { margin: 0; }
.contact-mark { position: absolute; z-index: 1; right: -1vw; bottom: -12vw; margin: 0; color: color-mix(in srgb, currentColor 14%, transparent); font-size: 48vw; font-weight: 800; line-height: .8; }

html[data-theme="dark"] .contact { color: #f2efe8; }
html[data-theme="dark"] .contact-email:hover,
html[data-theme="dark"] .contact-email:focus-visible,
html[data-theme="dark"] .contact-meta a:hover,
html[data-theme="dark"] .contact-meta a:focus-visible {
  background: #f2efe8;
  border-color: #f2efe8;
  color: #111;
}

.project-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink); }
.project-dialog::backdrop { background: rgba(0,0,0,.55); }
.project-dialog[open] { animation: dialog-in .45s var(--ease); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(30px); } }
.dialog-shell { min-height: 100%; position: relative; padding: clamp(70px, 9vw, 130px) var(--gutter); }
.dialog-close { position: fixed; z-index: 5; top: 18px; right: var(--gutter); }
.dialog-close span, .dialog-close span::after { width: 17px; height: 1px; background: currentColor; display: block; content: ""; transform: rotate(45deg); }
.dialog-close span::after { transform: rotate(90deg); }
.dialog-head { display: grid; grid-template-columns: .45fr 1fr; column-gap: 50px; align-items: end; margin-bottom: 54px; }
.dialog-head .eyebrow { grid-column: 1; }
.dialog-head h2 { grid-column: 2; grid-row: 1 / span 2; margin: 0; font-size: clamp(50px, 8vw, 120px); line-height: .9; }
.dialog-head > p:last-child { grid-column: 2; max-width: 680px; margin: 28px 0 0; font-size: 20px; }
.dialog-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 60px; border-top: 1px solid var(--line); }
.dialog-facts div { padding: 16px 12px 0 0; }
.dialog-facts dt { color: var(--muted); font-size: 12px; text-transform: uppercase; }
.dialog-facts dd { margin: 4px 0 0; font-weight: 700; }
.dialog-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.dialog-gallery figure { margin: 0; overflow: hidden; background: var(--surface); border-radius: var(--radius); }
.dialog-gallery figure:first-child:nth-last-child(3), .dialog-gallery figure:first-child:nth-last-child(3) ~ figure:last-child { grid-column: 1 / -1; }
.dialog-gallery img { width: 100%; height: 100%; max-height: 82vh; object-fit: contain; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

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

@media (max-width: 900px) {
  :root { --header-h: 66px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: grid; }
  .hero { min-height: calc(100svh - 38px); align-content: start; padding-top: 130px; }
  .hero-art { top: auto; bottom: 110px; right: -5vw; width: 42vw; opacity: .72; }
  .hero-summary { width: min(520px, 72vw); margin: 48px 0 0; }
  .section-heading { grid-template-columns: 1fr; align-items: start; }
  .impact-intro { display: block; }
  .impact-intro h2 { margin-top: 28px; }
  .impact-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { padding-bottom: 48px; border-bottom: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(3), .metric:nth-child(4) { padding-top: 40px; border-bottom: 0; }
  .about-main { grid-template-columns: 1fr; }
  .about-sticky { position: static; }
  .capabilities { grid-template-columns: 1fr; gap: 30px; }
  .dialog-head { grid-template-columns: 1fr; }
  .dialog-head h2, .dialog-head .eyebrow, .dialog-head > p:last-child { grid-column: 1; grid-row: auto; }
}

@media (max-width: 620px) {
  .brand-full { display: none; }
  .hero { min-height: calc(100svh - 38px); padding-top: 110px; }
  .hero-title { font-size: clamp(61px, 20vw, 100px); line-height: .79; }
  .name-line-offset { margin-left: 0; }
  .hero-summary { width: 100%; margin-top: 34px; }
  .hero-summary > p { max-width: 86%; font-size: 18px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .hero-art { width: 42vw; right: -10vw; bottom: 100px; opacity: .35; }
  .section-heading h2, .impact h2, .about h2 { font-size: 48px; }
  .filters { overflow-x: auto; padding-bottom: 4px; }
  .project-list { grid-template-columns: 1fr; }
  .project-featured, .project-creative { grid-column: 1; }
  .project-media-wide { aspect-ratio: 4 / 3; }
  .project-meta strong { font-size: 21px; }
  .impact-grid { grid-template-columns: 1fr; }
  .metric, .metric + .metric, .metric:nth-child(3), .metric:nth-child(4) { padding: 34px 0; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 35%, transparent); }
  .metric:last-child { border-bottom: 0; }
  .metric-value { margin-bottom: 22px; }
  .career-item { grid-template-columns: 1fr; gap: 8px; }
  .contact { min-height: 760px; }
  .contact h2 { font-size: clamp(57px, 18vw, 90px); }
  .contact-meta { flex-direction: column; gap: 10px; }
  .dialog-facts, .dialog-gallery { grid-template-columns: 1fr; }
  .dialog-gallery figure:first-child:nth-last-child(3), .dialog-gallery figure:first-child:nth-last-child(3) ~ figure:last-child { grid-column: 1; }
}

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

.contact-meta a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
}
.contact-meta a:hover, .contact-meta a:focus-visible { background: #111; border-color: #111; color: #fff; }

@media (max-width: 620px) {
  .mobile-menu { padding-top: 28px; padding-bottom: 28px; }
  .filters { gap: 7px; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .filters::-webkit-scrollbar { display: none; }
  .filter { flex: 0 0 auto; }
  .contact-email { width: 100%; justify-content: space-between; font-size: 17px; }
  .contact-meta a { justify-content: center; }
}

/* Version 1.4: section hierarchy */
.section .eyebrow,
.impact .eyebrow,
.about .eyebrow {
  color: var(--acid);
}

:root .metric-value {
  color: var(--orange);
}

html[data-theme="dark"] .metric-value {
  color: var(--acid);
}


/* Version 1.6: refreshed portfolio imagery */
.project-media-clean {
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}
.project-media-clean img {
  object-fit: contain;
  padding: clamp(10px, 2vw, 28px);
}
.dialog-gallery {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 22px);
  align-items: stretch;
}
.dialog-gallery figure {
  grid-column: span 6;
  min-height: 280px;
  display: grid;
  place-items: center;
}
.dialog-gallery figure:nth-child(1) {
  grid-column: 1 / -1;
  min-height: min(70vw, 760px);
}
.dialog-gallery figure:nth-child(3n + 2) {
  grid-column: span 7;
}
.dialog-gallery figure:nth-child(3n + 3) {
  grid-column: span 5;
}
.dialog-gallery img {
  max-height: none;
  object-fit: contain;
}
@media (max-width: 620px) {
  .dialog-gallery {
    grid-template-columns: 1fr;
  }
  .dialog-gallery figure,
  .dialog-gallery figure:nth-child(1),
  .dialog-gallery figure:nth-child(3n + 2),
  .dialog-gallery figure:nth-child(3n + 3) {
    grid-column: 1;
    min-height: 0;
  }
}


/* Version 1.7: square Selected Work image blocks */
.project-media,
.project-media-wide,
.project-media-portrait,
.project-media-video {
  aspect-ratio: 1 / 1;
}


/* Version 1.8: consistent two-column Selected Work grid */
.project-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project,
.project-featured,
.project-creative {
  grid-column: auto;
}

.project-media,
.project-media-wide,
.project-media-portrait,
.project-media-video {
  aspect-ratio: 1 / 1;
}

@media (max-width: 620px) {
  .project-list {
    grid-template-columns: 1fr;
  }
}


/* Version 1.9: expanded portfolio, scalable footer texture and local font preference */
.project-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.project,
.project-featured,
.project-creative {
  grid-column: auto;
}
.project-media,
.project-media-wide,
.project-media-portrait,
.project-media-video {
  aspect-ratio: 1 / 1;
}
.project-media-clean {
  background: color-mix(in srgb, var(--surface) 86%, var(--bg));
}
.project-media-clean img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(10px, 2vw, 28px);
}

/* Scalable CSS-only footer grain: no bitmap or fixed-resolution texture. */
.contact::before,
.contact::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
}
.contact::before {
  opacity: .34;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.30) 0 .45px, transparent .65px 3px),
    repeating-radial-gradient(circle at 70% 65%, rgba(0,128,128,.45) 0 .5px, transparent .75px 4px),
    repeating-linear-gradient(117deg, rgba(17,17,15,.08) 0 1px, transparent 1px 5px);
  background-size: 7px 7px, 11px 11px, 17px 17px;
  background-position: 0 0, 3px 5px, 0 0;
  mix-blend-mode: soft-light;
}
.contact::after {
  opacity: .20;
  background-image:
    radial-gradient(circle at 15% 22%, rgba(0,128,128,.85) 0 .7px, transparent 1px),
    radial-gradient(circle at 72% 61%, rgba(0,128,128,.65) 0 .6px, transparent .95px),
    radial-gradient(circle at 42% 84%, rgba(255,255,255,.55) 0 .55px, transparent .9px);
  background-size: 13px 13px, 19px 19px, 11px 11px;
  background-position: 0 0, 4px 7px, 8px 2px;
  mix-blend-mode: multiply;
}

/* Collage-style expanded project layouts. */
.dialog-gallery {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
  align-items: stretch;
}
.dialog-gallery figure,
.dialog-gallery figure:first-child:nth-last-child(3),
.dialog-gallery figure:first-child:nth-last-child(3) ~ figure:last-child {
  grid-column: span 6;
  min-height: 300px;
  display: grid;
  place-items: center;
  margin: 0;
}
.dialog-gallery figure.gallery-wide {
  grid-column: 1 / -1;
  min-height: min(65vw, 760px);
}
.dialog-gallery figure.gallery-small {
  grid-column: span 4;
  min-height: 240px;
}
.dialog-gallery figure.gallery-medium {
  grid-column: span 6;
}
.dialog-gallery img {
  width: 100%;
  height: 100%;
  max-height: 82vh;
  object-fit: contain;
}

@media (max-width: 620px) {
  .project-list {
    grid-template-columns: 1fr;
  }
  .dialog-gallery {
    grid-template-columns: 1fr;
  }
  .dialog-gallery figure,
  .dialog-gallery figure.gallery-wide,
  .dialog-gallery figure.gallery-small,
  .dialog-gallery figure.gallery-medium,
  .dialog-gallery figure:first-child:nth-last-child(3),
  .dialog-gallery figure:first-child:nth-last-child(3) ~ figure:last-child {
    grid-column: 1;
    min-height: 0;
  }
}


/* Version 1.10 test: natural-ratio masonry collage for Illustration only */
.dialog-gallery.dialog-gallery-masonry {
  display: block;
  columns: 3;
  column-gap: clamp(12px, 1.6vw, 24px);
}

.dialog-gallery.dialog-gallery-masonry figure,
.dialog-gallery.dialog-gallery-masonry figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry figure.gallery-small,
.dialog-gallery.dialog-gallery-masonry figure.gallery-medium {
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0 0 clamp(12px, 1.6vw, 24px);
  break-inside: avoid;
  overflow: hidden;
}

.dialog-gallery.dialog-gallery-masonry img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
}

@media (max-width: 900px) {
  .dialog-gallery.dialog-gallery-masonry {
    columns: 2;
  }
}

@media (max-width: 620px) {
  .dialog-gallery.dialog-gallery-masonry {
    columns: 1;
  }
}


/* Version 1.11: natural-ratio masonry across homepage and all project galleries */

/* Selected Work homepage masonry */
.project-list {
  display: block;
  columns: 2;
  column-gap: clamp(20px, 4vw, 64px);
}

.project,
.project-featured,
.project-creative {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(42px, 7vw, 104px);
  break-inside: avoid;
  grid-column: auto;
}

.project-media,
.project-media-wide,
.project-media-portrait,
.project-media-video {
  aspect-ratio: auto;
  min-height: 0;
}

.project-media img,
.project-media video,
.project-media-clean img {
  width: 100%;
  height: auto;
  object-fit: initial;
  padding: 0;
}

.project-media-clean {
  background: transparent;
}

/* Every expanded project now follows the same natural-ratio masonry system */
.dialog-gallery,
.dialog-gallery.dialog-gallery-masonry {
  display: block;
  columns: 3;
  column-gap: clamp(12px, 1.6vw, 24px);
}

.dialog-gallery figure,
.dialog-gallery figure.gallery-wide,
.dialog-gallery figure.gallery-small,
.dialog-gallery figure.gallery-medium,
.dialog-gallery figure:first-child:nth-last-child(3),
.dialog-gallery figure:first-child:nth-last-child(3) ~ figure:last-child,
.dialog-gallery.dialog-gallery-masonry figure,
.dialog-gallery.dialog-gallery-masonry figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry figure.gallery-small,
.dialog-gallery.dialog-gallery-masonry figure.gallery-medium {
  display: inline-block;
  width: 100%;
  min-height: 0;
  margin: 0 0 clamp(12px, 1.6vw, 24px);
  break-inside: avoid;
  grid-column: auto;
  overflow: hidden;
}

.dialog-gallery img,
.dialog-gallery.dialog-gallery-masonry img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
}

@media (max-width: 900px) {
  .dialog-gallery,
  .dialog-gallery.dialog-gallery-masonry {
    columns: 2;
  }
}

@media (max-width: 620px) {
  .project-list,
  .dialog-gallery,
  .dialog-gallery.dialog-gallery-masonry {
    columns: 1;
  }

  .project {
    margin-bottom: 48px;
  }
}


/* Version 1.12: full-width masonry columns in every expanded project */
.dialog-gallery,
.dialog-gallery.dialog-gallery-masonry {
  width: 100%;
  column-width: auto;
  column-fill: balance;
}

.dialog-gallery figure,
.dialog-gallery figure.gallery-wide,
.dialog-gallery figure.gallery-small,
.dialog-gallery figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry figure,
.dialog-gallery.dialog-gallery-masonry figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry figure.gallery-small,
.dialog-gallery.dialog-gallery-masonry figure.gallery-medium {
  display: inline-block;
  width: 100%;
  max-width: none;
  padding: 0;
  vertical-align: top;
}

.dialog-gallery figure > img,
.dialog-gallery.dialog-gallery-masonry figure > img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  padding: 0;
}


/* Version 1.14: restore visible Results section heading */
.impact h2,
.impact #impact-title {
  display: block;
  visibility: visible;
  opacity: 1;
  color: var(--bg);
}


/* Version 1.15: stable responsive layout for The Numbers / Real Outcomes */
.impact-intro {
  display: grid;
  grid-template-columns: minmax(150px, .35fr) minmax(0, 1.65fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}

.impact-intro .eyebrow {
  max-width: none;
}

.impact #impact-title {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  text-wrap: balance;
}

.impact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric {
  min-width: 0;
  overflow: hidden;
}

.metric-value,
.metric h3,
.metric > p:last-child {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.metric-value {
  font-size: clamp(48px, 5.6vw, 104px);
}

@media (max-width: 1100px) {
  .impact-intro {
    grid-template-columns: minmax(130px, .4fr) minmax(0, 1.6fr);
  }

  .impact #impact-title {
    font-size: clamp(48px, 7.5vw, 84px);
  }

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

  .metric,
  .metric + .metric {
    padding: 30px clamp(20px, 3vw, 34px);
    border-right: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
  }

  .metric:nth-child(odd) {
    padding-left: 0;
  }

  .metric:nth-child(even) {
    border-right: 0;
  }

  .metric:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .metric-value {
    margin-bottom: 24px;
    font-size: clamp(52px, 9vw, 88px);
  }
}

@media (max-width: 700px) {
  .impact-intro {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 54px;
  }

  .impact #impact-title {
    font-size: clamp(44px, 13vw, 64px);
    line-height: .94;
  }

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

  .metric,
  .metric + .metric,
  .metric:nth-child(odd),
  .metric:nth-child(even),
  .metric:nth-last-child(-n + 2) {
    padding: 32px 0;
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--bg) 35%, transparent);
  }

  .metric:last-child {
    border-bottom: 0;
  }

  .metric-value {
    font-size: clamp(52px, 17vw, 78px);
  }
}


/* Version 1.16: responsive project skills pills */
.dialog-head .dialog-summary {
  grid-column: 2;
  max-width: 680px;
  margin: 28px 0 0;
  font-size: clamp(17px, 1.6vw, 20px);
}

.dialog-skills {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(7px, 1vw, 10px);
  max-width: 100%;
  margin-top: clamp(18px, 2.4vw, 28px);
}

.dialog-skill-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: 100%;
  min-height: 2.35em;
  padding: .48em .95em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 900px) {
  .dialog-head .dialog-summary,
  .dialog-skills {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 420px) {
  .dialog-skills {
    align-items: stretch;
  }

  .dialog-skill-pill {
    flex: 1 1 auto;
  }
}


/* Version 1.17: lighter LAURA ANDREWS hero heading */
.hero-title,
.hero-title .name-line,
.hero-title .name-line > span {
  font-weight: 500;
}


/* Version 1.18: supplied footer artwork and dedicated Brand row */
.contact {
  background-color: #9fa18f;
  background-image: url("../assets/images/laura-andrews-footer.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.contact::before,
.contact::after {
  display: none;
}

/* Keep the two Brand projects together on one row when Brand is selected. */
.project-list[data-active-filter="brand"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-count: initial;
  column-gap: clamp(20px, 4vw, 64px);
  row-gap: clamp(42px, 7vw, 104px);
}

.project-list[data-active-filter="brand"] .project:not([aria-hidden="true"]) {
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.project-list .project[aria-hidden="true"] {
  display: none !important;
}

@media (max-width: 620px) {
  .project-list[data-active-filter="brand"] {
    grid-template-columns: 1fr;
  }
}


/* Version 1.19: supplied gradient artwork in the hero section */
.hero {
  background-color: #9fa18f;
  background-image: url("../assets/images/laura-andrews-footer.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #11110f;
}

.hero .button,
.hero .text-link {
  color: inherit;
}

html[data-theme="dark"] .hero {
  color: #f4f1ec;
}

html[data-theme="dark"] .hero .button:hover,
html[data-theme="dark"] .hero .button:focus-visible {
  background: #f4f1ec;
  border-color: #f4f1ec;
  color: #11110f;
}


/* Version 1.20: enforce white text on black pill buttons */
.filter.is-active,
.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.button:hover,
.button:focus-visible,
.contact-email:hover,
.contact-email:focus-visible,
.contact-meta a:hover,
.contact-meta a:focus-visible {
  background: #111;
  border-color: #111;
  color: #fff;
}

html[data-theme="dark"] .filter.is-active {
  background: #111;
  border-color: #111;
  color: #fff;
}


/* Version 1.21: persistent pill contrast and personal About section */

/* Any pill that is intentionally black keeps white text at rest, hover and focus. */
.button-primary,
.filter.is-active,
.desktop-nav a.is-active,
.mobile-menu a.is-active,
.contact-email.is-dark,
.contact-meta a.is-dark {
  background: #111;
  border-color: #111;
  color: #fff;
}

.button-primary:visited,
.filter.is-active:visited,
.desktop-nav a.is-active:visited,
.mobile-menu a.is-active:visited,
.contact-email.is-dark:visited,
.contact-meta a.is-dark:visited {
  color: #fff;
}

.button-primary:hover,
.button-primary:focus-visible,
.filter.is-active:hover,
.filter.is-active:focus-visible {
  background: #111;
  border-color: #111;
  color: #fff;
}

/* New personal About section */
.personal-about {
  display: grid;
  gap: clamp(52px, 8vw, 110px);
  background: var(--surface);
}

.personal-about-intro {
  display: grid;
  grid-template-columns: minmax(150px, .4fr) minmax(0, 1.6fr);
  gap: clamp(28px, 7vw, 110px);
  align-items: start;
}

.personal-about-intro h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(52px, 8vw, 118px);
  line-height: .9;
}

.personal-about-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(50px, 9vw, 140px);
  align-items: start;
}

.personal-about-copy {
  position: sticky;
  top: calc(var(--header-h) + 34px);
}

.personal-about-copy p {
  margin: 0;
  font-size: clamp(21px, 2.3vw, 34px);
  line-height: 1.24;
}

.personal-about-copy p + p {
  margin-top: 1.1em;
  color: var(--muted);
  font-size: clamp(17px, 1.55vw, 22px);
  line-height: 1.45;
}

.personal-about-notes {
  border-top: 1px solid var(--line);
}

.personal-about-notes article {
  display: grid;
  grid-template-columns: 52px minmax(0, .7fr) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 38px);
  padding: clamp(26px, 4vw, 48px) 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.personal-about-notes article > span {
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
}

.personal-about-notes h3 {
  margin: 0;
  font-size: clamp(24px, 2.5vw, 38px);
  line-height: 1;
}

.personal-about-notes p {
  margin: 0;
  color: var(--muted);
}

@media (max-width: 900px) {
  .personal-about-intro,
  .personal-about-grid {
    grid-template-columns: 1fr;
  }

  .personal-about-copy {
    position: static;
  }
}

@media (max-width: 620px) {
  .personal-about-intro h2 {
    font-size: clamp(48px, 15vw, 68px);
  }

  .personal-about-notes article {
    grid-template-columns: 38px 1fr;
  }

  .personal-about-notes article p {
    grid-column: 2;
  }
}


/* Version 1.22: footer-artwork skill pills and theme-aware project subheadings */
.dialog-skill-pill {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--ink) 35%, transparent);
  background-color: #9fa18f;
  background-image: url("../assets/images/laura-andrews-footer.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #11110f;
}

.dialog-skill-pill::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: rgba(244, 241, 236, .14);
}

html[data-theme="dark"] .dialog-skill-pill {
  border-color: rgba(244, 241, 236, .42);
  color: #f4f1ec;
}

html[data-theme="dark"] .dialog-skill-pill::before {
  background: rgba(17, 17, 15, .18);
}

/* Project-card subheadings */
.project-meta small {
  color: #008080;
}

html[data-theme="dark"] .project-meta small {
  color: #ff7f50;
}


/* Version 1.23: gallery image captions */
.dialog-gallery figure,
.dialog-gallery.dialog-gallery-masonry figure {
  background: transparent;
  border-radius: 0;
}

.dialog-gallery figure > img,
.dialog-gallery.dialog-gallery-masonry figure > img {
  border-radius: var(--radius);
  background: var(--surface);
}

.dialog-image-caption {
  display: block;
  width: 100%;
  margin: 0;
  padding: .7em .15em 0;
  color: var(--muted);
  font-size: clamp(12px, 1vw, 14px);
  line-height: 1.35;
  overflow-wrap: anywhere;
}


/* Version 1.24: category cleanup, outline skills and neutral subheadings */
.dialog-skill-pill,
html[data-theme="dark"] .dialog-skill-pill {
  background: transparent;
  background-image: none;
  color: var(--ink);
  border: 1px solid currentColor;
}

.dialog-skill-pill::before,
html[data-theme="dark"] .dialog-skill-pill::before {
  display: none;
}

.project-meta small,
html[data-theme="dark"] .project-meta small {
  color: #11110f;
}


/* Version 1.25: project cleanup, full-width masonry and theme-aware controls */
html[data-theme="light"] .contact-email {
  background: #111;
  border-color: #111;
  color: #f4f1ec;
}

html[data-theme="light"] .contact-email:visited,
html[data-theme="light"] .contact-email:hover,
html[data-theme="light"] .contact-email:focus-visible {
  background: #111;
  border-color: #111;
  color: #f4f1ec;
}

.dialog-close {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid transparent;
  border-radius: 999px;
}

html[data-theme="light"] .dialog-close {
  background: #111;
  border-color: #111;
  color: #f4f1ec;
}

html[data-theme="dark"] .dialog-close {
  background: #f2efe8;
  border-color: #f2efe8;
  color: #11110f;
}

html[data-theme="light"] .dialog-close:hover,
html[data-theme="light"] .dialog-close:focus-visible,
html[data-theme="dark"] .dialog-close:hover,
html[data-theme="dark"] .dialog-close:focus-visible {
  transform: scale(1.06);
}

.dialog-gallery,
.dialog-gallery.dialog-gallery-masonry {
  width: 100%;
  columns: 4 250px;
  column-gap: clamp(12px, 1.5vw, 24px);
  column-fill: balance;
}

.dialog-gallery figure,
.dialog-gallery.dialog-gallery-masonry figure,
.dialog-gallery figure.gallery-wide,
.dialog-gallery figure.gallery-medium,
.dialog-gallery figure.gallery-small,
.dialog-gallery.dialog-gallery-masonry figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry figure.gallery-small {
  display: inline-block;
  width: 100%;
  margin: 0 0 clamp(12px, 1.5vw, 24px);
  break-inside: avoid;
  page-break-inside: avoid;
  vertical-align: top;
}

.dialog-gallery figure > img,
.dialog-gallery.dialog-gallery-masonry figure > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
}

@media (max-width: 1100px) {
  .dialog-gallery,
  .dialog-gallery.dialog-gallery-masonry {
    columns: 3 220px;
  }
}

@media (max-width: 760px) {
  .dialog-gallery,
  .dialog-gallery.dialog-gallery-masonry {
    columns: 2 180px;
  }
}

@media (max-width: 520px) {
  .dialog-gallery,
  .dialog-gallery.dialog-gallery-masonry {
    columns: 1;
  }
}

/* Version 1.26: accessible contrast, animated punctuation and image enlargement */
:is(.button-primary, .filter.is-active, .desktop-nav a:hover, .desktop-nav a:focus-visible,
.mobile-menu a:hover, .mobile-menu a:focus-visible, .mobile-menu a:last-child,
.contact-email:hover, .contact-email:focus-visible, .contact-meta a:hover,
.contact-meta a:focus-visible, html[data-theme="light"] .contact-email,
html[data-theme="light"] .dialog-close) {
  color: #fff;
}

.bouncing-full-stop {
  display: inline-block;
  animation: full-stop-bounce 1.35s cubic-bezier(.4, 0, .2, 1) infinite;
  transform-origin: center bottom;
}

@keyframes full-stop-bounce {
  0%, 18%, 52%, 100% { transform: translateY(0); }
  34% { transform: translateY(-.62em); }
  43% { transform: translateY(-.46em); }
}

.dialog-gallery img {
  cursor: zoom-in;
}

.image-lightbox {
  position: fixed;
  z-index: 20;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: clamp(24px, 5vw, 72px);
  border: 0;
  background: rgba(17, 17, 15, .92);
  cursor: zoom-out;
}

.image-lightbox[hidden] {
  display: none;
}

.image-lightbox img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .bouncing-full-stop { animation: none; }
}

/* Version 1.28: keep two-image project galleries side by side */
.dialog-gallery.dialog-gallery-two,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 24px);
  columns: initial;
  column-gap: normal;
}

.dialog-gallery.dialog-gallery-two figure,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-two figure,
.dialog-gallery.dialog-gallery-two figure.gallery-wide,
.dialog-gallery.dialog-gallery-two figure.gallery-medium,
.dialog-gallery.dialog-gallery-two figure.gallery-small {
  display: block;
  width: 100%;
  margin: 0;
}

@media (max-width: 520px) {
  .dialog-gallery.dialog-gallery-two,
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-two {
    grid-template-columns: 1fr;
  }
}



/* Version 1.29: project-specific gallery columns, contact themes and rolling punctuation */
:root {
  --dialog-gallery-gap: clamp(12px, 1.5vw, 24px);
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
  display: grid;
  columns: initial;
  column-gap: normal;
  gap: var(--dialog-gallery-gap);
  align-items: start;
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure.gallery-small,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure.gallery-small {
  display: block;
  width: 100%;
  margin: 0;
}

@media (max-width: 820px) {
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-2,
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
    grid-template-columns: 1fr;
  }
}

html[data-theme="light"] .contact-email,
html[data-theme="light"] .contact-meta a,
html[data-theme="light"] .contact-email:visited,
html[data-theme="light"] .contact-meta a:visited {
  background: #f4f1ec;
  border-color: #11110f;
  color: #11110f;
}

html[data-theme="dark"] .contact-email,
html[data-theme="dark"] .contact-meta a,
html[data-theme="dark"] .contact-email:visited,
html[data-theme="dark"] .contact-meta a:visited {
  background: #11110f;
  border-color: #f2efe8;
  color: #f2efe8;
}

html[data-theme="light"] .contact-email:hover,
html[data-theme="light"] .contact-email:focus-visible,
html[data-theme="light"] .contact-meta a:hover,
html[data-theme="light"] .contact-meta a:focus-visible {
  background: #11110f;
  border-color: #11110f;
  color: #fff;
}

html[data-theme="dark"] .contact-email:hover,
html[data-theme="dark"] .contact-email:focus-visible,
html[data-theme="dark"] .contact-meta a:hover,
html[data-theme="dark"] .contact-meta a:focus-visible {
  background: #f2efe8;
  border-color: #f2efe8;
  color: #11110f;
}

.rolling-full-stop {
  display: inline-block;
  margin-left: .04em;
  transform-origin: 50% 82%;
  animation: full-stop-roll 1.8s ease-in-out infinite alternate;
}

@keyframes full-stop-roll {
  0% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(-.18em) rotate(-180deg); }
  100% { transform: translateX(.18em) rotate(180deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rolling-full-stop { animation: none; }
}


/* Version 1.30: masonry column counts, contact email themes, punctuation motion */
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
  display: block;
  width: 100%;
  gap: 0;
  column-gap: var(--dialog-gallery-gap);
  column-fill: balance;
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 {
  column-count: 2;
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
  column-count: 3;
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2 figure.gallery-small,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 figure.gallery-small {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--dialog-gallery-gap);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

@media (max-width: 820px) {
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
    column-count: 2;
  }
}

@media (max-width: 520px) {
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-2,
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-3 {
    column-count: 1;
  }
}

html[data-theme="light"] .contact-email,
html[data-theme="light"] .contact-email:visited {
  background: #11110f;
  border-color: #11110f;
  color: #fff;
}

html[data-theme="dark"] .contact-email,
html[data-theme="dark"] .contact-email:visited {
  background: #f2efe8;
  border-color: #f2efe8;
  color: #11110f;
}

html[data-theme="light"] .contact-email:hover,
html[data-theme="light"] .contact-email:focus-visible {
  background: #000;
  border-color: #000;
  color: #fff;
}

html[data-theme="dark"] .contact-email:hover,
html[data-theme="dark"] .contact-email:focus-visible {
  background: #fff;
  border-color: #fff;
  color: #000;
}


/* Version 1.31: revised punctuation motion and horizontal Odyssey gallery */
.rolling-full-stop {
  display: inline-block;
  margin-left: .04em;
  transform-origin: 50% 82%;
  animation: marketer-full-stop-flat-roll 2.4s ease-in-out infinite;
}

@keyframes marketer-full-stop-flat-roll {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  50% { transform: translateX(.7em) rotate(360deg); }
}

.creative-full-stop {
  display: inline-block;
  transform-origin: 50% 82%;
  animation: creative-full-stop-bounce-roll 2s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes creative-full-stop-bounce-roll {
  0%, 8%, 100% {
    transform: translateX(0) translateY(0) rotate(0deg) scaleX(1) scaleY(1);
  }
  12% {
    transform: translateX(.03em) translateY(.025em) rotate(12deg) scaleX(1.18) scaleY(.78);
  }
  30% {
    transform: translateX(.34em) translateY(-.48em) rotate(145deg) scaleX(.92) scaleY(1.08);
  }
  46% {
    transform: translateX(.58em) translateY(0) rotate(285deg) scaleX(1.2) scaleY(.76);
  }
  60% {
    transform: translateX(.42em) translateY(-.22em) rotate(205deg) scaleX(.95) scaleY(1.05);
  }
  72% {
    transform: translateX(.26em) translateY(0) rotate(125deg) scaleX(1.12) scaleY(.84);
  }
  82% {
    transform: translateX(.13em) translateY(-.09em) rotate(62deg) scaleX(.98) scaleY(1.02);
  }
  91% {
    transform: translateX(.04em) translateY(0) rotate(18deg) scaleX(1.06) scaleY(.92);
  }
}

/* Odyssey contains two images and should always read left-to-right. */
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2.dialog-gallery-odyssey {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--dialog-gallery-gap);
  column-count: auto;
}

.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2.dialog-gallery-odyssey figure,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2.dialog-gallery-odyssey figure.gallery-wide,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2.dialog-gallery-odyssey figure.gallery-medium,
.dialog-gallery.dialog-gallery-masonry.dialog-gallery-2.dialog-gallery-odyssey figure.gallery-small {
  display: block;
  width: 100%;
  margin: 0;
}

@media (max-width: 520px) {
  .dialog-gallery.dialog-gallery-masonry.dialog-gallery-2.dialog-gallery-odyssey {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rolling-full-stop,
  .creative-full-stop {
    animation: none;
  }
}


/* Version 1.33: contact punctuation, spacing, and LinkedIn profile */
.contact h2 {
  margin-bottom: 14px;
}

.contact-please {
  margin: 0 0 42px;
}

.hire-full-stop {
  display: inline-block;
  transform-origin: 50% 82%;
  animation: hire-full-stop-bounce 1.9s cubic-bezier(.45, 0, .2, 1) infinite;
}

@keyframes hire-full-stop-bounce {
  0%, 10%, 100% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  16% {
    transform: translateY(.025em) scaleX(1.16) scaleY(.8);
  }
  38% {
    transform: translateY(-.42em) scaleX(.92) scaleY(1.08);
  }
  58% {
    transform: translateY(0) scaleX(1.18) scaleY(.78);
  }
  72% {
    transform: translateY(-.16em) scaleX(.97) scaleY(1.04);
  }
  86% {
    transform: translateY(0) scaleX(1.08) scaleY(.9);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hire-full-stop {
    animation: none;
  }
}


/* Version 1.34: punctuation animations play once on first view */
.bouncing-full-stop,
.rolling-full-stop,
.creative-full-stop,
.hire-full-stop {
  animation-iteration-count: 1;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.bouncing-full-stop.is-punctuation-animating,
.rolling-full-stop.is-punctuation-animating,
.creative-full-stop.is-punctuation-animating,
.hire-full-stop.is-punctuation-animating {
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce) {
  .bouncing-full-stop,
  .rolling-full-stop,
  .creative-full-stop,
  .hire-full-stop {
    animation: none;
  }
}

/* Version 1.37: mobile-friendly Laura Andrews hero */
@media (max-width: 620px) {
  .hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 54px);
    padding-bottom: 64px;
  }

  .hero-copy {
    width: 100%;
    min-width: 0;
  }

  .hero-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(46px, 15vw, 76px);
    line-height: .82;
    overflow: visible;
  }

  .hero-title .name-line {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    gap: .015em;
    white-space: nowrap;
  }

  .hero-title .name-line-offset {
    margin-left: 0;
  }

  .hero-summary {
    width: 100%;
    max-width: 34rem;
    margin-top: 30px;
  }

  .hero-summary > p {
    max-width: 100%;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.35;
  }

  .hero-actions {
    width: 100%;
    align-items: stretch;
  }

  .hero-actions .button {
    width: 100%;
    justify-content: space-between;
  }

  .hero-actions .text-link {
    width: fit-content;
  }
}

@media (max-width: 380px) {
  .hero-title {
    font-size: clamp(42px, 14.4vw, 55px);
  }

  .hero {
    padding-top: calc(var(--header-h) + 42px);
  }
}