/* The image subjects occupy source x=737–1235, y=125–780.
   Landscape uses a lower anchor to protect the figure on wide screens.
   Portrait caps scale at a 620px-wide source window: both subjects survive
   even on tall phones. The photograph fades into its dark foreground. */
:root { color-scheme: dark; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #151515; color: #f2f2f2; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 240px; min-height: 100%; }
body { isolation: isolate; }
.scene { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: #151515; }
.scene picture { display: block; width: 100%; height: 100%; }
.scene img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 84%; filter: grayscale(1) brightness(.86) contrast(1.06); }
.scene::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgb(0 0 0 / .12), transparent 45%), linear-gradient(0deg, rgb(0 0 0 / .62), transparent 43%); }
main { min-height: 100vh; min-height: 100svh; min-height: 100dvh; position: relative; display: flex; align-items: flex-end; padding: max(3.8rem, env(safe-area-inset-top)) max(4.6vw, env(safe-area-inset-right)) max(5.8vh, env(safe-area-inset-bottom)) max(4.6vw, env(safe-area-inset-left)); }
.identity { max-width: 100%; text-shadow: 0 1px 12px rgb(0 0 0 / .22); }
h1 { margin: 0; font-size: clamp(1.875rem, 2.5vw, 3rem); line-height: 1.08; font-weight: 400; letter-spacing: -.055em; }
p { margin: .65rem 0 1.5rem; font-size: .9375rem; font-weight: 400; line-height: 1.5; letter-spacing: .012em; color: #dedede; }
.contacts { display: flex; align-items: center; gap: 1.65rem; flex-wrap: wrap; }
a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; line-height: 1.5; color: #e4e4e4; text-decoration-line: underline; text-decoration-color: rgb(255 255 255 / .35); text-decoration-thickness: 1px; text-underline-offset: .28em; transition: color 160ms ease, text-decoration-color 160ms ease; }
a:hover { color: #fff; text-decoration-color: #fff; }
a:focus-visible { outline: 1px solid #fff; outline-offset: 5px; border-radius: 1px; color: #fff; }
@media (max-aspect-ratio: 1/1) {
  .scene img { object-position: 63% 0%; }
  main { padding-left: max(7vw, env(safe-area-inset-left)); padding-right: max(7vw, env(safe-area-inset-right)); padding-bottom: max(5vh, env(safe-area-inset-bottom)); }
  h1 { font-size: clamp(1.875rem, 5vw, 2.5rem); }
  .scene::after { background: linear-gradient(0deg, rgb(0 0 0 / .78), transparent 43%); }
}
@media (max-aspect-ratio: 660/941) {
  .scene picture { height: min(100%, 151.775vw); }
  .scene img { object-position: 63% 0%; }
  .scene::after { background: linear-gradient(180deg, transparent 0%, transparent calc(min(100dvh, 151.775vw) * .80), #151515 min(100dvh, 151.775vw)); }
  main { padding-bottom: max(5.5vh, calc(env(safe-area-inset-bottom) + 1.5rem)); }
  p { margin-bottom: 1rem; }
}
@media (min-aspect-ratio: 2/1) {
  .scene img { object-position: 60% 45%; }
  main { padding-bottom: max(5vh, env(safe-area-inset-bottom)); }
  h1 { font-size: clamp(1.75rem, 3.7vh, 2.5rem); }
  p { margin-top: .5rem; margin-bottom: .65rem; }
}
/* At panoramic ratios, a complete frame is more valuable than filling
   the outer edges at the expense of the person or Parliament emblem. */
@media (min-aspect-ratio: 5/2) {
  .scene img { object-fit: contain; object-position: center; }
}
@media (max-height: 420px) and (min-aspect-ratio: 1/1) {
  main { padding-left: max(3.5vw, calc(env(safe-area-inset-left) + 1rem)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
  h1 { font-size: 1.75rem; }
  p { font-size: .875rem; margin: .45rem 0 .5rem; }
  .contacts { gap: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { a { transition: none; } }
@media (prefers-contrast: more) { p, a { color: #fff; } .identity { text-shadow: 0 1px 3px #000; } }
@media (forced-colors: active) { .scene { display: none; } }