/* About me (a few sentences and the code-drawn showreel in a small window), then contact (big email, links) and the footer. */
.about { padding-top: clamp(88px, 9vw, 124px); } /* space after the credentials */
.about-layout { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; } /* words left, window right */
.about-text { font: 400 clamp(20px, 1.75vw, 25px)/1.45 var(--body); letter-spacing: -0.01em; } /* his voice, large */
.about-text p + p { margin-top: 20px; } /* paragraph spacing */
.about-text em { color: var(--paper); font-style: italic; } /* the human detail, italic so it never reads as a link */
.showreel-window { overflow: hidden; border: 1px solid var(--ink-line); border-radius: 14px; background: var(--ink-raised); transform: rotate(2deg); } /* a small film window */
.showreel-window-bar { display: flex; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--ink-line); } /* window title bar */
.showreel-window-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgb(243 239 230 / 0.2); } /* window dots */
.showreel-window video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #4a4cf0; } /* the clip */
.showreel-window figcaption { padding: 12px 16px 14px; color: var(--paper-soft); font-size: 14.5px; } /* one line under the clip */
.contact { padding: clamp(96px, 10vw, 136px) 0 30px; } /* last section */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(32px, 5vw, 72px); align-items: end; } /* words on the left, address and buttons on the right */
.contact-reach { max-width: 520px; } /* the buttons wrap under the address */
.contact h2 { font: 800 clamp(64px, 8.4vw, 150px)/0.86 var(--display); letter-spacing: -0.05em; white-space: nowrap; } /* "Say hello." on one line */
.contact-avatar { display: inline-block; width: 0.74em; height: 0.74em; margin-right: 0.14em; border-radius: 50%; vertical-align: -0.02em; object-fit: cover; } /* his face beside the title, like a hand raised */
.contact-line { max-width: 520px; margin-top: 26px; color: var(--paper-soft); font-size: 18px; } /* how to reach him */
.email-copy { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding: 0; border: 0; background: none; color: var(--paper); font: 600 clamp(22px, 2.5vw, 36px)/1.15 var(--display); letter-spacing: -0.02em; text-align: left; cursor: pointer; } /* big email that copies on click */
.email-copy span { border-bottom: 2px solid var(--amber); } /* underline in the accent */
.email-copy small { color: var(--paper-faint); font: 500 13px var(--mono); letter-spacing: 0.03em; } /* "click to copy" hint */
.contact .button-row { margin-top: 26px; } /* the links */
.site-footer { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(64px, 7vw, 96px); padding: 22px 0 24px; border-top: 1px solid var(--ink-line); color: var(--paper-faint); font: 500 13px var(--mono); } /* name and year */
.site-footer a { text-decoration: none; } /* back to top link */