/* The reference contact page, over three counter-moving rows of supplied art. */
.contact { position: relative; overflow: hidden; display: block; min-height: 100svh; padding: 125px var(--page) 28px; background: #080808; isolation: isolate; }
.contact .contact-content { position: relative; z-index: 2; width: min(900px, 100%); margin: 0 auto 55px; text-align: center; }
.contact .contact-content > .eyebrow { font-size: 12px; color: #c7c3cd; letter-spacing: .07em; }
.contact .contact-content h2 { margin-top: 32px; font-size: clamp(42px, 5.05vw, 82px); line-height: 1.05; font-weight: 400; letter-spacing: -.055em; }
.contact .contact-content > p:not(.eyebrow) { margin-top: 32px; font-size: 17px; line-height: 1.5; color: #c8c4cb; }
.contact .contact-bar { margin-top: 45px; min-height: 72px; padding: 8px 8px 8px 27px; background: #08080875; border-color: #ffffff2e; }
.contact .contact-bar > span { color: #c7c3cb; font-size: 14px; }
.contact .contact-bar :is(strong, button) { min-height: 52px; padding-inline: 23px; font-size: 12px; gap: 28px; }
.contact .instagram-link { margin-top: 23px; color: #ccc7d1; font-size: 11px; }
.contact .contact-tags { margin-top: 23px; }
.contact .contact-tags > :is(span, a) { border-color: #ffffff35; color: #c4becb; }
.contact .contact-tags > a { cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.contact .contact-tags > a:hover { color: #fff; border-color: #b393ff; background: #7950d54a; }
.contact .contact-tags > a:focus-visible { outline: 2px solid #bd99ff; outline-offset: 3px; }
.contact .contact-tags > span:first-child { color: #111; }
.portfolio-source, .portfolio-group { list-style: none; margin: 0; padding: 0; }
.portfolio-source { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.portfolio-source li, .portfolio-group li { overflow: hidden; border-radius: 15px; background: #171419; }
.portfolio-source li { min-width: 0; aspect-ratio: 3 / 4; }
.portfolio-source img, .portfolio-group img { width: 100%; height: 100%; object-fit: contain; }
.contact .portfolio-source img, .contact .portfolio-group img { object-fit: cover; object-position: center; }
.portfolio-wall { display: none; pointer-events: none; }
.contact.gallery-ready { display: flex; align-items: center; justify-content: center; min-height: max(100svh, 720px); padding: 115px var(--page) 125px; }
.gallery-ready .contact-content { margin-bottom: 0; }
.gallery-ready .portfolio-source { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.gallery-ready .portfolio-wall { --art-gap: clamp(10px, 1vw, 18px); --art-height: clamp(180px, calc((100svh - var(--art-gap) * 2) / 3), 380px); --art-width: calc(var(--art-height) * .75); display: flex; flex-direction: column; justify-content: center; gap: var(--art-gap); position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: .52; }
.portfolio-row { flex: 0 0 var(--art-height); height: var(--art-height); }
.portfolio-track { display: flex; width: max-content; animation: portfolio-drift var(--gallery-duration, 50s) linear infinite; animation-delay: var(--gallery-delay, 0s); animation-play-state: paused; will-change: transform; }
.portfolio-track[data-direction='right'] { animation-direction: reverse; }
.portfolio-group { display: flex; flex-shrink: 0; gap: var(--art-gap); padding-right: var(--art-gap); }
.portfolio-group li { flex: 0 0 var(--art-width); width: var(--art-width); height: var(--art-height); border-radius: clamp(10px, 1vw, 18px); }
.gallery-running .portfolio-track { animation-play-state: running; }
.contact.gallery-ready .portfolio-wall { opacity: .72; }
.contact.gallery-ready::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at 50% 44%, #0808088c 10%, #08080859 45%, #08080814 77%), linear-gradient(#08080824, #08080808 35%, #08080859 78%, #080808cc 100%); }
.portfolio-tools { display: flex; align-items: center; gap: 24px; }
.contact footer { position: relative; inset: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; color: #aaa2b3; font-size: 10px; letter-spacing: .02em; }
.contact.gallery-ready footer { position: absolute; z-index: 3; left: var(--page); right: var(--page); bottom: 35px; margin: 0; }
.is-story .contact.gallery-ready { min-height: 100svh; padding: 110px var(--page) 130px; }
.is-story .contact .contact-content { width: min(900px, calc(100% - 48px)); }
.is-story .contact.gallery-ready footer { bottom: 33px; }
.is-story.on-contact .story-status, .is-story.on-portfolio .story-status { visibility: hidden; }
.is-story.on-contact .story-progress > span { background: #a281de; }
@keyframes portfolio-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (min-width: 761px) and (max-height: 740px) {
  .contact .contact-content h2 { font-size: min(4.8vw, 9svh); margin-top: 22px; }
  .contact .contact-content > p:not(.eyebrow) { margin-top: 20px; font-size: 15px; }
  .contact .contact-bar { min-height: 61px; margin-top: 28px; }
  .contact .contact-bar :is(strong, button) { min-height: 43px; }
  .contact .instagram-link, .contact .contact-tags { margin-top: 16px; }
}
@media (max-width: 760px) {
  .contact { padding: 105px 22px 24px; }
  .contact.gallery-ready { padding: 130px 22px 110px; }
  .is-story .contact.gallery-ready { padding: 130px 22px 120px; }
  .is-story .contact .contact-content { width: 100%; }
  .contact .contact-content > .eyebrow { font-size: 10px; }
  .contact .contact-content h2 { margin-top: 26px; font-size: clamp(31px, 8.3vw, 59px); line-height: 1.12; }
  .contact .contact-content > p:not(.eyebrow) { font-size: 13px; margin: 25px auto 0; max-width: 310px; }
  .contact .contact-bar { min-height: 63px; margin-top: 31px; padding-left: 15px; gap: 10px; }
  .contact .contact-bar > span { font-size: 10px; line-height: 1.5; max-width: 145px; }
  .contact .contact-bar :is(strong, button) { min-height: 43px; padding-inline: 14px; font-size: 10px; gap: 12px; }
  .contact .instagram-link { font-size: 10px; margin-top: 20px; }
  .contact .contact-tags { margin-top: 19px; gap: 4px; }
  .contact .contact-tags > :is(span, a) { padding: 5px 7px; font-size: 8px; }
  .contact .contact-tags > span:first-child { width: 25px; height: 25px; font-size: 17px; }
  .portfolio-source { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .portfolio-source li { border-radius: 10px; }
  .portfolio-tools { gap: 12px; }
  .contact footer > span { max-width: 108px; line-height: 1.5; }
  .contact.gallery-ready footer, .is-story .contact.gallery-ready footer { left: 22px; right: 22px; bottom: 25px; font-size: 7px; gap: 12px; flex-wrap: nowrap; }
  .contact footer a > span { margin-left: 6px; }
  .is-story.on-contact .chapter-nav { top: 79px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); gap: 0; border-radius: 30px; background: #08080890; backdrop-filter: blur(10px); }
  .is-story.on-contact .chapter-nav a { min-width: 27px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .is-story .contact.gallery-ready { padding-top: 114px; padding-bottom: 85px; }
  .contact .contact-content h2 { margin-top: 18px; }
  .contact .contact-content > p:not(.eyebrow) { margin-top: 19px; }
  .contact .contact-bar { margin-top: 24px; }
  .contact .instagram-link, .contact .contact-tags { margin-top: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-track { animation: none; }
}

/* The diagonal portfolio remains its own screen, before the contact page. */
.portfolio { background: #080808; isolation: isolate; }
.portfolio-title { margin: 0 0 36px; font-size: clamp(32px, 5vw, 72px); font-weight: 400; letter-spacing: -.04em; }
.portfolio.gallery-ready .portfolio-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.portfolio.gallery-ready { min-height: 100svh; }
.is-story .portfolio.gallery-ready { min-height: 0; }
.portfolio.gallery-ready .portfolio-wall { --art-gap: clamp(12px, 1.2vw, 22px); --art-width: clamp(170px, 25vw, 370px); --art-height: calc(var(--art-width) * 4 / 3); display: grid; grid-template-columns: repeat(4, var(--art-width)); gap: var(--art-gap); width: max-content; height: 150svh; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%) rotate(-14deg); overflow: visible; opacity: 1; }
.portfolio-column { min-height: 0; }
.portfolio-column .portfolio-track { flex-direction: column; width: var(--art-width); animation-name: portfolio-diagonal-drift; }
.portfolio-column .portfolio-group { flex-direction: column; padding-right: 0; padding-bottom: var(--art-gap); }
.portfolio-column .portfolio-group li { flex: 0 0 var(--art-height); border-radius: clamp(12px, 1.2vw, 20px); }
.portfolio-track[data-direction='down'] { animation-direction: reverse; }
.portfolio.gallery-ready::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(#08080855, transparent 20%, transparent 75%, #080808ee), linear-gradient(90deg, #08080870, transparent 15%, transparent 85%, #08080870); }
.portfolio footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 35px; font-size: 10px; color: #d2cbdc; letter-spacing: .03em; }
.portfolio.gallery-ready footer { position: absolute; left: var(--page); right: var(--page); bottom: 33px; margin: 0; }
.portfolio footer a > span { margin-left: 12px; }
.is-story.on-portfolio .chapter-nav { opacity: .85; }
@keyframes portfolio-diagonal-drift { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@media (max-width: 760px) {
  .portfolio.gallery-ready .portfolio-wall { --art-width: clamp(165px, 29vw, 215px); }
  .portfolio.gallery-ready footer { left: 22px; right: 22px; bottom: 25px; font-size: 8px; }
  .is-story.on-portfolio .chapter-nav { bottom: 76px; }
}

.contact .contact-bar input { flex: 1; min-width: 0; width: 100%; padding: 12px 0; border: 0; border-radius: 0; outline: none; background: transparent; color: #fff; font: inherit; font-size: 14px; }
.contact .contact-bar input::placeholder { color: #c7c3cb; opacity: 1; }
.contact .contact-bar:focus-within { border-color: #bb96ff; box-shadow: 0 0 0 2px #bb96ff25; }
.contact .contact-bar button { border: 0; font-family: inherit; cursor: pointer; transition: background .2s; }
.contact .contact-bar button:hover { background: #dfd0ff; }
.contact .contact-bar button:disabled { cursor: wait; opacity: .65; }
.contact .contact-content > .contact-feedback { font-size: 13px; line-height: 1.5; margin-top: 14px; color: #e0d3f0; }
.contact-feedback a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .contact .contact-bar input { font-size: 11px; }
}