:root {
  --ink: #111;
  --muted: #9b9b9b;
  --paper: #fff;
  --hairline: #ececec;
  --edge: 8px;
  --header-height: 78px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; }

.skip-link {
  position: fixed;
  z-index: 200;
  left: 12px;
  top: 10px;
  padding: 10px 14px;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto;
  height: var(--header-height);
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr);
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(0);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.site-header.header-hidden { transform: translateY(-100%); }

.artist-name {
  justify-self: start;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1;
  cursor: pointer;
}

.desktop-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 40px);
  height: 100%;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .025em;
  white-space: nowrap;
}
.desktop-nav > a,
.desktop-nav-item > a { transition: color 150ms ease; }
.desktop-nav > a:hover,
.desktop-nav > a:focus-visible,
.desktop-nav-item:hover > a,
.desktop-nav-item:focus-within > a { color: var(--muted); }
.desktop-nav .active-page { color: var(--muted); }
.desktop-nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.stacked-label { display: flex; flex-direction: column; line-height: 1.28; }

.desktop-submenu {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: -15px;
  width: max-content;
  min-width: 206px;
  display: flex;
  flex-direction: column;
  padding: 13px 15px 15px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-5px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 140ms ease;
}
.desktop-nav-item:hover .desktop-submenu,
.desktop-nav-item:focus-within .desktop-submenu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.desktop-submenu a { padding: 5px 0; font-size: 11px; letter-spacing: .035em; transition: color 140ms ease; }
.desktop-submenu a:hover,
.desktop-submenu a:focus-visible,
.desktop-submenu a.active { color: var(--muted); }

.social-links { display: flex; gap: 9px; }
.desktop-socials { justify-self: end; }
.social-links a {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border: 1px solid #6e6e6e;
  border-radius: 50%;
  background: var(--paper);
  transition: color 150ms ease, border-color 150ms ease;
}
.social-links a:hover,
.social-links a:focus-visible { color: var(--muted); border-color: var(--muted); }
.instagram-mark {
  position: relative;
  width: 17px;
  height: 17px;
  display: block;
  border: 1.5px solid currentColor;
  border-radius: 5px;
}
.instagram-mark::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  left: 50%;
  top: 50%;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  transform: translate(-50%,-50%);
}
.instagram-mark::after {
  content: "";
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  right: 2.5px;
  top: 2.5px;
  border-radius: 50%;
  background: currentColor;
}
.linkedin-mark { font-size: 15px; font-weight: 700; letter-spacing: -.06em; }
.email-mark { font-size: 20px; transform: translateY(-.5px); }
.mobile-menu-button, .mobile-menu { display: none; }

.project-intro {
  padding: calc(var(--header-height) + clamp(50px, 6vw, 82px)) clamp(20px, 3vw, 46px) 18px;
}
.project-intro h1 {
  margin: 0 0 26px;
  font-size: clamp(30px, 3.15vw, 48px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
}
.project-intro p {
  max-width: 850px;
  margin: 0;
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.55;
}
.project-image-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 var(--edge) var(--edge);
}
.project-artwork {
  display: block;
  width: 100%;
  height: auto;
}
.project-layout-placeholder {
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
  aspect-ratio: 1920 / 742;
  overflow: hidden;
  background: #f1f1ef;
  border: 1px solid #e5e5e2;
  color: #8f8f8b;
}
.project-layout-placeholder:nth-child(even) { background: #ececea; }
.project-layout-placeholder span {
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: .12em;
}
.project-layout-placeholder small {
  position: absolute;
  right: 14px;
  bottom: 12px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .08em;
}
.project-gap-none { margin-bottom: 0; }
.project-gap-intro { margin-bottom: 24px; }

.metal-friends-intro { padding-bottom: 32px; }
.metal-friends-layout .project-layout-placeholder { border: 0; }
.metal-story-first { aspect-ratio: 2520 / 974; }
.metal-keyart-one { aspect-ratio: 2500 / 1401; }
.metal-keyart-two { aspect-ratio: 2499 / 1407; }
.metal-keyart-three { aspect-ratio: 1572 / 914; }
.metal-keyart-gap { margin-bottom: 15px; }

.spider-page-intro {
  width: min(100%, 1110px);
  margin: 0 auto;
  padding: calc(var(--header-height) + clamp(34px, 4vw, 58px)) clamp(20px, 3vw, 46px) 0;
  text-align: center;
}
.spider-title-block { text-align: center; }
.spider-title-block h1 {
  margin: 0;
  font-size: clamp(24px, 2.35vw, 35px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
}
.spider-title-block p { margin: 7px 0 0; font-size: clamp(12px, 1vw, 14px); line-height: 1.3; }
.spider-description {
  max-width: 720px;
  margin: clamp(22px, 3vw, 38px) auto 0;
  font-size: clamp(11px, .95vw, 14px);
  line-height: 1.55;
  text-align: center;
}
.spider-gallery {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: clamp(28px, 3.2vw, 44px) var(--edge) var(--edge);
}

.special-gift-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: calc(var(--header-height) + clamp(38px, 4.5vw, 64px));
  padding-bottom: 24px;
}
.special-gift-intro h1 {
  margin: 0 0 clamp(18px, 2.2vw, 30px);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  text-align: center;
}
.special-gift-feature { width: min(54.17vw, 812px); }
.special-gift-gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 clamp(24px, 5vw, 72px) var(--edge);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.character-design-layout { padding: var(--header-height) clamp(16px, 3.2vw, 48px) var(--edge); }
.character-gallery { display: flex; flex-direction: column; gap: 10px; }

.jedi-monkey-layout { padding-top: var(--header-height); }
.jedi-contained { margin: 0 clamp(16px, 3.05vw, 46px); }
.jedi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.jedi-final-stack { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }
.jedi-placeholder {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  background: #f1f1ef;
  color: #8f8f8b;
}
.jedi-placeholder:nth-child(even) { background: #ececea; }
.jedi-placeholder span { font-size: clamp(8px, .85vw, 13px); letter-spacing: .12em; }
.jedi-placeholder small {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .08em;
}
.jedi-standard { aspect-ratio: 5100 / 3300; }
.jedi-final-one { aspect-ratio: 2500 / 1456; }
.jedi-final-two { aspect-ratio: 2500 / 1495; }

.animation-page {
  padding-top: calc(var(--header-height) + clamp(90px, 7vw, 116px));
  padding-bottom: 140px;
}
.animation-list {
  width: min(75%, 960px);
  margin: 0 auto;
}
.animation-project { scroll-margin-top: calc(var(--header-height) + 28px); }
.animation-project + .animation-project { margin-top: 156px; }
.animation-project-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: 1.2;
}
.animation-project-synopsis {
  max-width: 760px;
  margin: 0 0 24px;
  color: #2f2f2f;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  letter-spacing: .005em;
}
.animation-project-synopsis span { display: block; }
.animation-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
}

.sketchbook-page {
  --sketchbook-edge: clamp(24px, 3vw, 48px);
  --sketchbook-gap: clamp(22px, 2.2vw, 32px);
  padding-top: var(--header-height);
}
.sketchbook-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  margin: 0 var(--sketchbook-edge);
  padding: clamp(44px, 5.5vw, 78px) 0 22px;
  border-bottom: 1px solid var(--hairline);
}
.sketchbook-heading {
  margin: 0;
  font-size: clamp(24px, 2.2vw, 34px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1;
}
.sketchbook-subtitle {
  max-width: 420px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: .015em;
}
.sketchbook-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--sketchbook-gap);
  padding: 18px var(--sketchbook-edge) 42px;
}
.sketchbook-column {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sketchbook-gap);
}
.sketchbook-artwork {
  display: block;
  width: 100%;
  height: auto;
}
.sketchbook-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin: 0 var(--sketchbook-edge);
  padding: 20px 0 28px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 10px;
  letter-spacing: .04em;
}
.back-to-top { transition: color 150ms ease; }
.back-to-top:hover,
.back-to-top:focus-visible { color: var(--ink); }

.about-page {
  --about-page-x: clamp(15px, 1.4vw, 30px);
  min-height: 100vh;
  padding: calc(var(--header-height) + clamp(30px, 1.9vw, 41px)) var(--about-page-x) 34px;
}
.about-layout {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 41.2fr) minmax(0, 58.8fr);
  align-items: start;
  column-gap: clamp(44px, 5.2vw, 112px);
  row-gap: clamp(36px, 2.6vw, 56px);
  margin: 0 auto;
}
.about-layout > *, .about-portrait-wrap, .about-copy { min-width: 0; }
.about-portrait-wrap { width: 100%; max-width: none; margin: 0; }
.about-portrait {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
  background: #f2f2f2;
}
.about-portrait-caption {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 11px;
  color: #8f8f8f;
  font-size: clamp(9px, .85vw, 18px);
  line-height: 1.4;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.about-portrait-caption span { min-width: 0; }
.about-copy { width: 100%; max-width: none; }
.about-intro {
  max-width: 100%;
  margin: 0 0 clamp(48px, 4vw, 86px);
  font-size: clamp(38px, 3.62vw, 78px);
  font-weight: 500;
  line-height: 1.09;
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.about-intro span { display: block; white-space: nowrap; }
.about-bio {
  max-width: 100%;
  margin: 0;
  color: #2f2f2f;
  font-size: clamp(15px, 1.4vw, 30px);
  font-weight: 400;
  line-height: 1.62;
  overflow-wrap: break-word;
}
.about-bio + .about-bio { margin-top: clamp(20px, 2.2vw, 47px); }
.about-meta {
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(100px, 23.7%) minmax(0, 1fr);
  row-gap: clamp(14px, 1.7vw, 36px);
  column-gap: 24px;
  margin-top: clamp(52px, 6.7vw, 144px);
  padding-top: clamp(17px, 1.7vw, 36px);
  border-top: 1px solid var(--hairline);
  font-size: clamp(11px, 1.05vw, 22px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .025em;
}
.about-meta > * { min-width: 0; overflow-wrap: anywhere; }
.about-meta-label { color: #777; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; }
.about-contact-list {
  width: 100%;
  margin-top: clamp(44px, 5.5vw, 118px);
  border-top: 1px solid var(--hairline);
}
.about-contact-row {
  width: 100%;
  min-height: clamp(47px, 4.4vw, 94px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(11px, 1.05vw, 22px);
  font-weight: 500;
  letter-spacing: .055em;
  text-transform: uppercase;
  transition: color 150ms ease;
}
.about-contact-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.about-contact-row:hover,
.about-contact-row:focus-visible { color: var(--muted); }
.about-arrow { flex: 0 0 auto; font-size: clamp(13px, 1.15vw, 24px); transform: translateY(-1px); }
.about-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin: clamp(110px, 14vw, 210px) auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media (max-width: 1180px) {
  .about-page { padding-top: calc(var(--header-height) + clamp(30px, 3vw, 38px)); }
  .about-layout {
    grid-template-columns: minmax(0, 41.2fr) minmax(0, 58.8fr);
    column-gap: clamp(28px, 5.2vw, 62px);
    row-gap: clamp(24px, 2.6vw, 31px);
  }
  .about-portrait-wrap { grid-column: 1; max-width: none; }
  .about-copy { grid-column: 2; max-width: none; }
  .about-intro { margin-top: 0; font-size: clamp(36px, 3.62vw, 43px); }
}

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; padding: 0 16px; }
  .desktop-nav, .desktop-socials { display: none; }
  .mobile-menu-button {
    justify-self: end;
    width: 36px;
    height: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 4px;
    background: transparent;
    cursor: pointer;
  }
  .mobile-menu-button span { width: 28px; height: 1px; display: block; background: var(--ink); }
  .mobile-menu {
    position: fixed;
    z-index: 100;
    inset: 0;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: var(--header-height) 1fr auto;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .mobile-menu-header {
    height: var(--header-height);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 0 16px;
  }
  .mobile-menu-close { position: relative; width: 36px; height: 36px; padding: 0; background: transparent; cursor: pointer; }
  .mobile-menu-close span { position: absolute; left: 4px; top: 17px; width: 28px; height: 1px; background: var(--ink); }
  .mobile-menu-close span:first-child { transform: rotate(45deg); }
  .mobile-menu-close span:last-child { transform: rotate(-45deg); }
  .mobile-nav {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 30px 24px;
    text-align: center;
    font-size: clamp(22px, 6vw, 30px);
    line-height: 1.06;
    letter-spacing: -.025em;
  }
  .mobile-nav-group { display: flex; flex-direction: column; align-items: center; }
  .mobile-nav-group > button { display: flex; flex-direction: column; padding: 0; background: transparent; cursor: pointer; line-height: 1.06; }
  .mobile-nav > a:hover,
  .mobile-nav-group > button:hover,
  .mobile-nav-group > button[aria-expanded="true"] { color: var(--muted); }
  .mobile-nav .active-page { color: var(--muted); }
  .animation-page { padding-top: calc(var(--header-height) + 70px); }
  .animation-project + .animation-project { margin-top: 126px; }
  .about-layout { grid-template-columns: minmax(0, 41.2fr) minmax(0, 58.8fr); column-gap: clamp(24px, 4.5vw, 44px); }
  .about-portrait-wrap { max-width: none; }
  .about-intro { font-size: clamp(31px, 3.62vw, 36px); }
  .about-bio { font-size: clamp(14px, 1.55vw, 15px); }
  .about-meta { grid-template-columns: 82px minmax(0, 1fr); column-gap: 18px; font-size: 10px; }
  .mobile-submenu {
    max-height: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    opacity: 0;
    transition: max-height 250ms ease, opacity 180ms ease, padding 250ms ease;
  }
  .mobile-submenu.open { max-height: 280px; padding-top: 16px; opacity: 1; }
  .mobile-submenu a { font-size: 12px; letter-spacing: .03em; line-height: 1.25; }
  .mobile-submenu a:hover,
  .mobile-submenu a:focus-visible,
  .mobile-submenu a.active { color: var(--muted); }
  .mobile-socials { justify-content: center; padding: 0 0 34px; }
}

@media (max-width: 760px) {
  :root { --edge: 4px; --header-height: 64px; }
  .artist-name { font-size: 17px; }
  .project-intro { padding: calc(var(--header-height) + 38px) 16px 12px; }
  .project-intro h1 { margin-bottom: 20px; }
  .project-layout-placeholder small { right: 8px; bottom: 7px; font-size: 7px; }
  .project-gap-intro { margin-bottom: 16px; }
  .metal-friends-intro { padding-bottom: 22px; }
  .spider-page-intro {
    width: 100%;
    padding: calc(var(--header-height) + 28px) 16px 0;
  }
  .spider-title-block h1 { font-size: clamp(25px, 7vw, 34px); }
  .spider-title-block p { font-size: 12px; }
  .spider-description { margin-top: 22px; font-size: 11px; line-height: 1.6; }
  .spider-gallery { gap: 20px; padding-top: 24px; }
  .special-gift-intro { padding: calc(var(--header-height) + 28px) 16px 16px; }
  .special-gift-intro h1 { margin-bottom: 16px; font-size: clamp(25px, 7vw, 34px); }
  .special-gift-feature { width: 100%; }
  .special-gift-gallery { padding-right: 20px; padding-left: 20px; }
  .character-design-layout { padding-right: 16px; padding-left: 16px; }
  .jedi-contained { margin-right: 16px; margin-left: 16px; }
  .jedi-grid, .jedi-final-stack { gap: 20px; }
  .jedi-placeholder small { right: 7px; bottom: 6px; font-size: 6px; }
  .animation-page { padding-top: calc(var(--header-height) + 48px); padding-bottom: 84px; }
  .animation-list { width: calc(100% - 36px); }
  .animation-project + .animation-project { margin-top: 92px; }
  .animation-project-title { margin-bottom: 9px; font-size: 14px; letter-spacing: .025em; }
  .animation-project-synopsis { margin-bottom: 18px; font-size: 12px; line-height: 1.6; }
  .about-page {
    --about-page-x: 18px;
    padding-top: calc(var(--header-height) + 38px);
    padding-bottom: 22px;
  }
  .about-layout { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 0; }
  .about-portrait-wrap { width: min(82vw, 430px); max-width: 100%; margin: 0 auto; }
  .about-copy { width: min(100%, 560px); max-width: none; margin: 46px auto 0; }
  .about-intro {
    width: 100%;
    max-width: 590px;
    margin: 0 0 26px;
    font-size: clamp(25px, 7.6vw, 38px);
    line-height: 1.08;
  }
  .about-bio { width: 100%; max-width: 560px; font-size: 14px; line-height: 1.65; }
  .about-meta {
    width: 100%;
    max-width: 560px;
    grid-template-columns: minmax(76px, 92px) minmax(0, 1fr);
    column-gap: 16px;
    margin-top: 42px;
    font-size: 10px;
  }
  .about-contact-list { width: 100%; max-width: 560px; margin-top: 42px; }
  .about-contact-row { min-height: 46px; font-size: 10px; }
  .about-footer { width: 100%; flex-direction: column; gap: 8px; margin-top: 105px; }
}

@media (max-width: 650px) {
  .sketchbook-page { --sketchbook-edge: 16px; --sketchbook-gap: 18px; }
  .sketchbook-intro {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 15px;
    padding: 36px 0 16px;
  }
  .sketchbook-heading { font-size: 25px; }
  .sketchbook-subtitle { max-width: 310px; margin-top: 8px; font-size: 11px; }
  .sketchbook-gallery { grid-template-columns: 1fr; padding-top: 10px; padding-bottom: 28px; }
  .sketchbook-column { display: contents; }
  .sketchbook-footer { padding: 16px 0 22px; font-size: 9px; }
}

@media (max-width: 460px) {
  .about-portrait-wrap { width: 86vw; max-width: 100%; }
  .about-portrait-caption { display: block; }
  .about-portrait-caption span { display: block; }
  .about-portrait-caption span + span { margin-top: 3px; }
  .about-intro { font-size: clamp(24px, 7.3vw, 35px); }
  .about-meta { grid-template-columns: 74px minmax(0, 1fr); column-gap: 14px; }
}

@media (max-width: 420px) {
  .about-intro { font-size: clamp(23px, 7.15vw, 30px); letter-spacing: -.03em; }
}

@media (max-width: 360px) {
  .about-page { --about-page-x: 14px; }
  .about-portrait-wrap { width: 100%; }
  .about-intro { font-size: 24px; }
  .about-meta { display: block; }
  .about-meta-label { display: block; margin-top: 16px; margin-bottom: 4px; }
  .about-meta-label:first-child { margin-top: 0; }
}

@media (max-width: 340px) {
  .about-intro { font-size: 22px; letter-spacing: -.025em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}