.contact-page { min-height: calc(100vh - 94px); padding: 7vh 9vw; background: #d7ed58; color: var(--ink); }
.contact-intro { display: grid; grid-template-columns: .75fr 2fr; align-items: end; border-bottom: 1px solid var(--ink); padding-bottom: 38px; }
.contact-intro h2 { margin: 0; font: 600 clamp(74px, 10vw, 160px)/.75 var(--serif); letter-spacing: -.08em; }.contact-intro h2 em { color: var(--pink); }.contact-intro .section-no { align-self: start; }
.contact-grid { max-width: 620px; margin: 20vh auto 0; }.contact-note { margin: 0; font: 600 clamp(29px, 3vw, 44px)/.96 var(--serif); letter-spacing: -.035em; }.contact-details { display: grid; gap: 28px; align-content: start; }.contact-email { display: flex; justify-content: space-between; border-bottom: 1px solid var(--ink); padding-bottom: 13px; color: var(--ink); font: 500 clamp(17px, 2vw, 26px) var(--sans); text-decoration: none; }.contact-details div { display: grid; grid-template-columns: 108px 1fr; gap: 16px; font: 11px/1.35 var(--mono); text-transform: uppercase; }.contact-details span { opacity: .65; }.contact-details p, .contact-details a { margin: 0; color: var(--ink); text-decoration: none; }
@media (max-width:760px) { .contact-page { min-height: calc(100vh - 76px); padding: 40px 20px; }.contact-intro { grid-template-columns: 1fr; gap: 28px; padding-bottom: 24px; }.contact-intro h2 { font-size: 75px; }.contact-grid { margin-top: 18vh; }.contact-note { font-size: 32px; }.contact-details div { grid-template-columns: 94px 1fr; } }