@font-face {
  font-family: 'Jacquard 24';
  src: url('../fonts/jacquard24/Jacquard24-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
/* Bio and SoundCloud stack left; the unified work pane sits slightly lower right. */
.homepage { --page-width: 80rem; }
.homepage #name { margin: 0 0 4px; }
.homepage .display-name { font-family: 'Jacquard 24', Georgia, serif; font-size: clamp(2.25rem, 4.05vw, 3.6rem); font-weight: 400; line-height: .94; letter-spacing: -.025em; color: var(--text); }
.homepage .display-name .name-prefix { font-size: .5em; letter-spacing: normal; }
.homepage .profile-links { margin-top: 8px; }
.homepage .profile-panel { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.homepage .profile-opening { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.homepage .profile-opening .about { grid-column: 1; grid-row: 1; }
.homepage .profile-opening .soundcloud-section { grid-column: 1; grid-row: 2; }
.homepage .work { grid-column: 2; grid-row: 1 / span 2; display: block; margin: 64px 0 0; padding: 30px; }
.homepage .work .link-group { margin: 0; }
.homepage .work .link-group + .link-group { margin-top: 28px; }
.homepage .work .section-heading { flex-wrap: wrap; }
.homepage .game-links { display: block; }
.homepage .work-note { margin: 0; padding-top: 24px; }
.homepage .soundcloud-link { margin-left: auto; text-align: right; min-width: 0; max-width: 100%; flex-shrink: 1; }
.homepage .music-note { grid-template-columns: minmax(0, 1fr); }
.homepage .music-pair { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; width: min(1060px, calc(100% - 96px)); }
.homepage .music-copy { grid-column: 1; }
.homepage .music-players { display: grid; grid-column: 2; gap: 24px; min-width: 0; }
.homepage .music-player { margin-top: 0; }
.homepage .music-tools { margin-top: 16px; width: min(1060px, calc(100% - 96px)); margin-left: auto; }
.homepage .tools-introduction { width: min(100%, 720px); margin: 0 0 28px; padding: 26px 30px; }
.homepage .tools-intro { max-width: 68ch; }
/* One more horizontal step after the tools introduction, inside the stage. */
.homepage .tool-groups { --tools-step: clamp(32px, 4vw, 64px); grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - var(--tools-step)); margin-left: var(--tools-step); }
.homepage .tool-group:first-child { grid-column: 1; }
.homepage .tool-group:last-child { grid-column: 2; margin-top: 0; }
.homepage .domain-note { width: min(100%, 560px); justify-self: center; padding: 24px 28px; margin-top: calc(96px - 24px); }
.homepage .domain-note h3 { font-size: 1.125rem; margin: 0 0 8px; }
.homepage .domain-note p { font-size: 1rem; line-height: 1.6; }
.homepage .ornate-divider { height: 104px; min-height: 104px; margin-block: 64px; background: transparent; color: #ffffffbb; --glass-edge: #ffffffbb; }
.divider-engraving { display: block; width: 100%; height: 104px; filter: drop-shadow(0 0 3px #ffffff66); }
.ornate-divider[data-pane-ready] > .divider-engraving { visibility: hidden; }
.ornate-divider .pane-outline path { stroke-width: 2; }
.ornate-divider .pane-outline { filter: drop-shadow(0 0 3px #ffffff66); }
@media (max-width: 1100px) {
  .homepage { --page-width: 44rem; }
  .homepage .music-pair > *, .homepage .tool-group:first-child, .homepage .tool-group:last-child { grid-column: 1; }
  .homepage .music-note, .homepage .music-pair, .homepage .tool-groups { grid-template-columns: minmax(0, 1fr); }
  .homepage .music-pair, .homepage .music-tools, .homepage .tool-groups { width: 100%; margin-left: 0; }
  .homepage .music-player, .homepage .tool-group:last-child { margin-top: 0; }
}
@media (max-width: 850px) {
  .homepage .profile-panel { gap: 28px; }
  .homepage .profile-opening { grid-template-columns: minmax(0, 1fr); }
  .homepage .profile-opening > .about, .homepage .profile-opening > .soundcloud-section, .homepage .work { grid-column: 1; grid-row: auto; }
  .homepage .work { margin: 0; padding: 26px; }
  .homepage .domain-note { margin-top: calc(56px - 24px); }
  .homepage .ornate-divider { margin-block: 40px; }
  .homepage .tools-introduction, .homepage .domain-note { padding: 22px; }
}