/* Keep contact visible after React footer hydration. */
.hwf-brand p a { color: inherit; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.hwf-brand p a:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
/* Case-study detail-art styles must not impose their 5:4 ratio on inner assets. */
.forma-cover img { aspect-ratio: auto; }

@media (max-width: 640px) {
  /* The desktop composition becomes a readable mobile presentation. */
  .forma-cover,
  .project-art .forma-cover { aspect-ratio: 1.15; }
  .forma-cover .forma-cover-copy { left: 6%; top: 6%; width: 88%; transform: none; }
  .forma-cover .forma-cover-wordmark { width: 42%; margin-bottom: 10px; }
  .forma-cover .forma-cover-caption { font-size: 10px; line-height: 1.6; letter-spacing: .06em; }
  .forma-cover .forma-cover-desktop { left: 6%; top: 36%; width: 67%; transform: none !important; }
  .forma-cover .forma-cover-mobile { left: 77%; top: 36%; width: 17%; transform: none !important; }
  /* Constrain the new aspect ratio by width AND available viewport height. */
  .forma-zoom .forma-zoom-media.is-cover { width: min(calc(100vw - 24px), calc(115dvh - 27.6px)); }

  :root[data-theme] .hwf-root { height: clamp(370px, 95vw, 420px) !important; }
  .hwf-root .hwf-top, .hwf-root .hwf-rule { font-size: 11px; letter-spacing: .12em; }
  .hwf-root .hwf-col a { display: inline-flex; align-items: center; min-height: 30px; }
  .hwf-root .hwf-rule { margin-top: 16px; }
  .hwf-root .hwf-up { min-height: 32px; }
}

/* Match the case-study return row when pointing at or focusing the project caption. */
:root[data-theme] .project-caption { background: var(--paper); }
:root[data-theme] .project-caption:hover,
:root[data-theme] .project-caption:focus-within { background: var(--theme-menu-hover); }

/* Both project bars fade in and out and remain native links. */
:root[data-theme] .project-caption,
:root[data-theme] .next-project { transition: background-color 250ms ease; }
:root[data-theme] a.project-caption { color: var(--ink); text-decoration: none; }
:root[data-theme] .next-project:focus-visible { background: var(--theme-menu-hover); }
@media (prefers-reduced-motion: reduce) {
  :root[data-theme] .project-caption,
  :root[data-theme] .next-project { transition: none; }
}

/* Screen frames must not change bitmap layout during zoom. */
.forma-cover .forma-cover-desktop,
.forma-cover .forma-cover-mobile { border: 0; outline: 1px solid var(--line); outline-offset: -1px; }