/* The résumé's #333F50 band as the whole page, the white md mark, Manrope
   type (md, 2026-10-02), and the Transamerica Pyramid hanging from the top-right
   corner, generated by ../transamerica.py. */
@font-face{font-family:"Manrope";src:url("fonts/Manrope-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
:root{--band:#333F50;--soft:rgba(255,255,255,.72);--line:rgba(255,255,255,.38)}
*{box-sizing:border-box}
html{background:var(--band);color:#fff;font-family:"Manrope",system-ui,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  padding:3rem 1.75rem;background:radial-gradient(120% 90% at 12% 8%,#3d4a5d 0%,var(--band) 48%,#2a3443 100%)}
/* The tower is a full-viewport layer; the SVG's own xMidYMax slice does the cropping */
.tower{position:absolute;inset:0;pointer-events:none;user-select:none}
.tower img{display:block;width:100%;height:100%}
/* main shrinks to the lockup's width, so the button centres under the name */
main{position:relative;max-width:34rem;display:flex;flex-direction:column}
.lockup{display:flex;align-items:center;gap:1.1rem}
.mark{display:block;height:2.5rem;width:auto}
.rule{width:1px;height:2.4rem;background:rgba(255,255,255,.35)}
h1{margin:0;font-weight:600;font-size:clamp(1.9rem,5.2vw,2.6rem);line-height:1;letter-spacing:-.02em}
p{margin:1.6rem 0 0;max-width:30rem;font-size:clamp(1.05rem,2.6vw,1.22rem);line-height:1.55;color:var(--soft)}
.contact{align-self:center;margin-top:2.25rem;padding:.75rem 1.5rem;border:1px solid var(--line);border-radius:999px;
  color:#fff;font-weight:500;font-size:.98rem;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s}
.contact:hover{background:#fff;border-color:#fff;color:var(--band)}
.contact:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Portrait screens get the portrait tower (same rule as the <picture> source),
   so the text sits low, below its spire */
@media (max-aspect-ratio:1/1){body{align-items:flex-end;padding-bottom:11vh}}
@media (max-width:600px){.mark{height:2.1rem}.rule{height:2rem}}
@media (prefers-reduced-motion:no-preference){
  main>*{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  main>:nth-child(2){animation-delay:.07s}
  main>:nth-child(3){animation-delay:.14s}
  .tower{animation:fade 1.4s ease-out both}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}