@charset "UTF-8";

:root {
  color-scheme: light;
  --paper: #fafaf8;
  --ink: #282e2d;
  --muted: #616965;
  --accent: #3d6657;
  --line: #e6e8e2;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
::selection { color: #fff; background: var(--accent); }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 2px; }
.skip-link { position: absolute; top: -80px; left: 24px; z-index: 10; padding: 12px 18px; background: var(--ink); color: #fff; }
.skip-link:focus { top: 16px; }
.site-shell { display: flex; flex-direction: column; width: min(100% - 112px, 1040px); min-height: 100vh; min-height: 100svh; margin: 0 auto; }
.site-header { display: flex; align-items: center; min-height: 104px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 500; letter-spacing: .1px; text-decoration: none; }
.brand-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
main { display: flex; align-items: center; justify-content: center; flex: 1; padding: 48px 0 75px; }
.profile { display: grid; grid-template-columns: 280px minmax(0, 390px); align-items: center; gap: clamp(40px, 6.2vw, 86px); width: 100%; max-width: 756px; }
.portrait-frame { overflow: hidden; aspect-ratio: 7 / 8; border-radius: 8px; background: #e2e7e9; }
.portrait { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 37%; }
.eyebrow { margin: 0 0 16px; color: var(--muted); font-size: 10px; font-weight: 500; line-height: 1.5; letter-spacing: 2.3px; }
h1 { margin: 0 0 23px; font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif; font-size: clamp(43px, 4.4vw, 60px); font-weight: 400; line-height: 1.1; letter-spacing: -2px; }
.name-period { color: var(--accent); }
.description, .professional { color: var(--muted); font-size: 16px; line-height: 1.8; }
.description { max-width: 330px; margin: 0 0 18px; }
.professional { max-width: 360px; margin: 0; }
.linkedin-link { display: inline-flex; align-items: center; white-space: nowrap; color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.linkedin-link svg { display: inline-block; vertical-align: -2px; margin-left: 4px; }
.linkedin-link:hover { color: var(--ink); }
.site-footer { padding: 25px 0 29px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.6; }

@media (min-width: 1500px) { .site-shell { max-width: 1120px; } }
@media (max-width: 760px) {
  .site-shell { width: calc(100% - 64px); }
  .site-header { min-height: 88px; }
  main { padding: 32px 0 56px; }
  .profile { grid-template-columns: 230px minmax(0, 1fr); gap: 32px; }
  h1 { font-size: 43px; }
  .description, .professional { font-size: 14px; }
}
@media (max-width: 600px) {
  .site-shell { width: calc(100% - 48px); max-width: 420px; }
  .site-header { min-height: 78px; }
  main { padding: 28px 0 52px; }
  .profile { grid-template-columns: 1fr; gap: 32px; max-width: 340px; }
  .portrait-frame { width: 200px; aspect-ratio: 1; border-radius: 6px; }
  .portrait { object-position: 50% 34%; }
  .eyebrow { margin-bottom: 12px; font-size: 9px; }
  h1 { margin-bottom: 18px; font-size: 48px; letter-spacing: -1.8px; }
  .description, .professional { font-size: 15px; }
  .description { margin-bottom: 16px; }
  .site-footer { padding: 21px 0 24px; font-size: 10px; }
}
@media (max-width: 360px) {
  .portrait-frame { width: 180px; }
  h1 { font-size: 42px; }
}