.gallery-note a { margin-left: 8px; color: var(--ink); font-weight: 700; text-underline-offset: 4px; }
.dj-name.section { padding-top: 0; padding-bottom: 75px; }
.dj-name-box { display: grid; grid-template-columns: .9fr 1.1fr; gap: 55px; align-items: center; padding: 45px; border: 1.5px solid var(--ink); border-radius: 20px; background: #e5f4be; box-shadow: 5px 6px 0 #21174420; }
.dj-name h2 { margin-top: 22px; font-size: clamp(40px,4.2vw,56px); }
.dj-name-copy > p:not(.eyebrow) { color: #4a573b; font-size: 14px; }
.dj-name-copy .name-example { display: inline-block; color: var(--ink); border-bottom: 3px solid #aa8af5; padding-bottom: 5px; }
.name-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.name-fields label { display: block; font-size: 12px; line-height: 1.4; font-weight: 700; }
.name-fields select { display: block; width: 100%; min-height: 50px; margin-top: 9px; padding: 10px; border: 1.5px solid var(--ink); border-radius: 7px; background: var(--cream); color: var(--ink); font: 400 15px 'DM Sans',sans-serif; }
.name-button { width: 100%; justify-content: space-between; margin-top: 18px; cursor: pointer; }
.name-result { border: 1.5px dashed #8a9b67; border-radius: 12px; padding: 23px; margin-top: 26px; background: var(--cream); text-align: center; }
.name-result .eyebrow { display: block; font-size: 9px; letter-spacing: 1.5px; margin: 0 0 13px; }
#dj-name-output { display: block; font: 600 21px/1.3 'Space Grotesk',sans-serif; color: #777082; overflow-wrap: anywhere; }
#dj-name-output.has-name { font-size: 29px; font-weight: 700; color: #7951cc; }
.name-result > p:last-child { margin: 15px 0 0; font-size: 11px; color: #625b72; }
.name-result a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 1000px) and (min-width: 801px) {
  .dj-name-box { padding: 32px; gap: 30px; }
  .name-fields { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .dj-name.section { padding-top: 0; padding-bottom: 60px; }
  .dj-name-box { grid-template-columns: 1fr; gap: 25px; padding: 30px 25px; }
  .name-fields { grid-template-columns: 1fr; }
  .name-fields select { font-size: 16px; }
  .gallery-note a { display: block; margin: 12px 0 0; }
}
@media (max-width: 420px) {
  .dj-name-box { padding: 26px 20px; }
  .name-result { padding: 20px 14px; }
  #dj-name-output.has-name { font-size: 27px; }
}