:root {
  --ink: #14221e;
  --muted: #5f6f68;
  --paper: #f4f2eb;
  --card: rgba(255, 255, 252, 0.86);
  --line: rgba(20, 34, 30, 0.13);
  --accent: #c85e3f;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(244, 209, 168, 0.34), transparent 34rem),
    radial-gradient(circle at 88% 92%, rgba(168, 185, 165, 0.45), transparent 38rem),
    var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.site-shell {
  position: relative; display: grid; min-height: 100svh; place-items: center;
  overflow: hidden; padding: 48px 28px 32px;
}
.profile-card {
  position: relative; z-index: 1; display: grid; width: min(100%, 970px);
  grid-template-columns: 160px minmax(0, 1fr); gap: clamp(36px, 7vw, 84px);
  align-items: start; padding: clamp(38px, 7vw, 78px); border: 1px solid rgba(255,255,255,.86);
  border-radius: 32px; background: var(--card); box-shadow: 0 32px 80px rgba(40,54,46,.11), inset 0 0 0 1px var(--line);
  backdrop-filter: blur(16px);
}
.monogram {
  display: grid; width: 148px; aspect-ratio: 1; place-items: center; border-radius: 50%;
  color: #fffdf7; background: var(--ink); font: 48px Georgia, "Times New Roman", serif;
  letter-spacing: -.07em; box-shadow: 14px 18px 0 rgba(200,94,63,.78);
}
.profile-content { max-width: 610px; }
.eyebrow {
  margin: 4px 0 18px; color: var(--accent); font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
h1 {
  max-width: 650px; margin: 0; font: 400 clamp(3.3rem, 8vw, 6.5rem)/.88 Georgia, "Times New Roman", serif;
  letter-spacing: -.065em;
}
.intro {
  max-width: 590px; margin: 30px 0 0; color: #34443e;
  font: clamp(1.2rem, 2.3vw, 1.55rem)/1.55 Georgia, "Times New Roman", serif;
}
.strengths { display: flex; flex-wrap: wrap; gap: 9px; margin: 32px 0 40px; padding: 0; list-style: none; }
.strengths li {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  background: rgba(244,242,235,.52); font-size: .84rem; font-weight: 600;
}
.contact-link {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  min-height: 64px; padding: 0 4px 0 20px; border: 1px solid var(--line); border-radius: 17px;
  text-decoration: none; transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.contact-link > span:first-child { font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.contact-address { color: var(--muted); font-size: .95rem; }
.arrow {
  display: grid; width: 54px; height: 54px; place-items: center; border-radius: 14px;
  color: white; background: var(--accent); font-size: 1.35rem; transition: background 180ms ease;
}
.contact-link:hover { border-color: rgba(200,94,63,.45); background: rgba(255,255,255,.72); transform: translateY(-2px); }
.contact-link:hover .arrow { background: #ab4c31; }
.contact-link:focus-visible { outline: 3px solid rgba(200,94,63,.35); outline-offset: 4px; }
footer {
  position: absolute; z-index: 1; bottom: 19px; display: flex; gap: 12px; align-items: center;
  color: rgba(20,34,30,.58); font-size: .72rem; letter-spacing: .05em; text-transform: uppercase;
}
.footer-mark { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.ambient { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.ambient-one { top: -110px; right: -70px; width: 280px; height: 280px; border: 1px solid rgba(20,34,30,.12); }
.ambient-two { bottom: -180px; left: -120px; width: 380px; height: 380px; border: 1px solid rgba(200,94,63,.18); }
@media (max-width: 720px) {
  .site-shell { display: block; padding: 24px 18px 76px; }
  .profile-card { grid-template-columns: 1fr; gap: 34px; padding: 34px 28px 30px; border-radius: 24px; }
  .monogram { width: 88px; font-size: 29px; box-shadow: 8px 10px 0 rgba(200,94,63,.78); }
  h1 { font-size: clamp(3.4rem, 18vw, 5.4rem); }
  .intro { margin-top: 24px; }
  .contact-link { grid-template-columns: 1fr auto; gap: 3px 12px; padding-left: 16px; }
  .contact-link > span:first-child { align-self: end; }
  .contact-address { grid-column: 1; align-self: start; font-size: .85rem; }
  .arrow { grid-column: 2; grid-row: 1 / span 2; }
  footer { right: 18px; bottom: 24px; left: 18px; justify-content: center; font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}