/* The photograph is the grid. Its two subjects remain outside every text region.
   Source: 1672 × 941. Figure: x 735–806, y 580–777.
   Entrance and emblem: x 914–1240, y 125–390. */
:root {
  color-scheme: dark;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-synthesis: none;
  --edge: clamp(24px, 3.5vw, 76px);
  --ink: #f5f5f5;
  --quiet: #ededed;
  --picture: url("/assets/parliament.webp");
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #404040; color: var(--ink); -webkit-text-size-adjust: 100%; }

.scene, .composition {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.scene { pointer-events: none; filter: grayscale(1); }
.scene__photograph { position: absolute; inset: 0; background: var(--picture) 50% 45% / cover no-repeat; }
.scene__paving { display: none; }
/* This fade ends before the figure. No global overlay or vignette. */
.scene__shade {
  position: absolute;
  inset: 0 auto 0 0;
  width: 39%;
  background: linear-gradient(90deg, rgb(0 0 0 / .58), rgb(0 0 0 / .29) 72%, transparent);
}
.composition {
  padding: max(var(--edge), env(safe-area-inset-top)) max(var(--edge), env(safe-area-inset-right)) max(var(--edge), env(safe-area-inset-bottom)) max(var(--edge), env(safe-area-inset-left));
}
.identity { position: absolute; top: max(7vh, env(safe-area-inset-top)); left: max(var(--edge), env(safe-area-inset-left)); }
h1 { font-size: clamp(34px, 3.5vw, 64px); line-height: .98; font-weight: 400; letter-spacing: -.055em; margin: 0; }
.role { margin: 14px 0 0; font-size: clamp(14px, 1.04vw, 18px); line-height: 1.25; font-weight: 400; letter-spacing: -.012em; color: var(--quiet); }
.contacts { display: flex; gap: 25px; margin-top: 26px; font-size: clamp(14px, .98vw, 16px); line-height: 1.35; font-style: normal; color: var(--quiet); }
.contacts a { min-height: 24px; }
a { color: inherit; text-decoration: none; text-underline-offset: .24em; text-decoration-thickness: 1px; -webkit-tap-highlight-color: rgb(255 255 255 / .12); }
a:hover { color: #fff; text-decoration: underline; }
a:focus-visible { color: #fff; outline: 1px solid currentColor; outline-offset: 5px; text-decoration: underline; }
.works {
  position: absolute;
  left: max(var(--edge), env(safe-area-inset-left));
  bottom: max(6vh, env(safe-area-inset-bottom));
  width: 29.5%;
  max-width: 520px;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: clamp(17px, 2.1vh, 29px);
  font-size: clamp(14px, 1.08vw, 19px);
  line-height: 1.32;
  letter-spacing: -.009em;
  color: var(--quiet);
}
.works li { margin: 0; padding: 0; }
.works a { display: block; min-height: 24px; text-wrap: pretty; }
.works li:last-child { font-size: 1em; }

/* Short, wide screens: identity sits beyond the entrance, the works occupy
   the left paving. This includes phones in landscape with browser controls. */
@media (min-aspect-ratio: 6/5) and (max-height: 540px) {
  :root { --edge: clamp(18px, 2.8vw, 32px); }
  .identity {
    top: max(25px, env(safe-area-inset-top));
    left: auto;
    right: max(var(--edge), env(safe-area-inset-right));
    width: 18%;
  }
  h1 { font-size: clamp(24px, 3.5vw, 34px); line-height: 1; }
  .role { font-size: 14px; margin-top: 12px; }
  .contacts { flex-direction: column; gap: 9px; margin-top: 19px; font-size: 14px; }
  .works { width: 36%; bottom: max(24px, env(safe-area-inset-bottom)); font-size: 14px; line-height: 1.23; gap: clamp(10px, 3.5vh, 18px); }
  .scene__shade { width: 42%; }
  .identity { text-shadow: 0 1px 3px #000, 0 0 10px rgb(0 0 0 / .65); }
}

/* Portrait art direction, rather than a fixed object-position crop.
   x=.78 of the image sits at the right edge, preserving the full entrance
   and person. A reflected stretch of ONLY the bottom 12% of empty paving
   continues the photograph below it; architecture and people are untouched.
   The image has no tint, blur, grain layer, or subject-obscuring fade. */
@media (max-aspect-ratio: 6/5) {
  :root {
    --edge: clamp(24px, 4.6vw, 48px);
    --scene-height: min(72vh, 155vw, calc(100vh - 220px));
    --scene-height: min(72dvh, 155vw, calc(100dvh - 220px));
    --scene-width: calc(var(--scene-height) * 1672 / 941);
    --scene-left: calc(100vw - var(--scene-width) * .78);
  }
  .scene__photograph {
    inset: 0 auto auto var(--scene-left);
    width: var(--scene-width);
    height: var(--scene-height);
    background-size: 100% 100%;
  }
  .scene__paving {
    display: block;
    position: absolute;
    top: var(--scene-height);
    bottom: 0;
    width: 100%;
    background-image: var(--picture);
    background-repeat: no-repeat;
    background-position: var(--scene-left) bottom;
    background-size: var(--scene-width) 833.3333%;
    transform: scaleY(-1);
  }
  .scene__shade {
    inset: var(--scene-height) 0 0;
    width: auto;
    background: linear-gradient(180deg, transparent, rgb(0 0 0 / .46) 45%, rgb(0 0 0 / .57));
  }
  .identity {
    top: max(var(--edge), env(safe-area-inset-top));
    width: calc(100vw - var(--scene-width) * .234 - var(--edge) * 2);
    text-shadow: 0 1px 3px #000, 0 0 12px rgb(0 0 0 / .55);
  }
  h1 { font-size: clamp(32px, 4.7vw, 48px); line-height: .97; }
  .role { font-size: 14px; line-height: 1.25; margin-top: 13px; }
  .contacts { flex-direction: column; gap: 8px; font-size: 14px; margin-top: 20px; }
  .works {
    width: calc(100% - var(--edge) * 2);
    max-width: 620px;
    bottom: max(var(--edge), env(safe-area-inset-bottom));
    gap: clamp(12px, 1.8vh, 21px);
    font-size: clamp(14px, 3.65vw, 17px);
    line-height: 1.27;
    text-shadow: 0 1px 3px rgb(0 0 0 / .65);
  }
  .works li:last-child { font-size: 1em; }
}

@media (max-aspect-ratio: 6/5) and (max-height: 740px) {
  .works { font-size: 14px; line-height: 1.22; gap: 11px; }
  .contacts { margin-top: 16px; }
}

/* Tablets and tall desktop windows have enough width for an intact,
   full-height photograph. Their works move into the right-hand paving. */
@media (min-width: 540px) and (min-height: 741px) and (min-aspect-ratio: 13/20) and (max-aspect-ratio: 6/5) {
  :root { --scene-height: 100vh; --scene-height: 100dvh; }
  .scene__paving { display: none; }
  .scene__shade {
    display: none;
  }
  .works {
    left: auto;
    right: max(var(--edge), env(safe-area-inset-right));
    width: min(50%, calc(var(--scene-width) * .298 - var(--edge) - 32px));
    max-width: 620px;
  }
}

@media (max-width: 350px) and (max-aspect-ratio: 6/5) {
  :root { --scene-height: min(64vh, 155vw, calc(100vh - 220px)); --scene-height: min(64dvh, 155vw, calc(100dvh - 220px)); }
}

/* Low landscape browser height retains readable 14px titles. */
@media (min-aspect-ratio: 6/5) and (max-height: 350px) {
  .works { top: max(18px, env(safe-area-inset-top)); bottom: auto; gap: 10px; line-height: 1.2; width: 37%; }
  .identity { top: max(18px, env(safe-area-inset-top)); }
}

/* At extreme landscape ratios, a narrow duplicate at the outer edges
   supplies the last few pixels of background. The central photograph
   keeps its original proportions and both subjects in frame. */
@media (min-aspect-ratio: 5/2) {
  .scene { background: var(--picture) 50% 45% / cover no-repeat; }
  .scene__photograph {
    left: calc(50% - 125vh);
    left: calc(50% - 125dvh);
    right: auto;
    width: 250vh;
    width: 250dvh;
  }
}

@media (forced-colors: active) {
  .scene { display: none; }
  a { text-decoration: underline; }
  .identity, .works { text-shadow: none; }
}