/* Shared surfaces, including the canvas-backed sections. */
:root[data-theme="light"], :root[data-theme="light"][data-footer-visible] {
  --paper: #faf9f6;
  --ink: #171716;
  --muted: #65645f;
  --line: #deddd7;
  --browser-surface: #faf9f6;
  --forma-surface: #f1f0eb;
  --theme-menu-hover: color-mix(in srgb, var(--ink) 6%, var(--paper));
  color-scheme: light;
}
:root[data-theme="dark"], :root[data-theme="dark"][data-footer-visible] {
  --browser-surface: #151515;
  --forma-surface: #202020;
  color-scheme: dark;
}
:root[data-theme] .hwf-root {
  --hwf-bg: var(--paper) !important;
  --hwf-ink: var(--ink) !important;
  background: var(--paper);
  color: var(--ink);
}
:root[data-theme="light"] .hwf-root canvas {
  filter: invert(1) brightness(1.08);
  mix-blend-mode: multiply;
}
:root[data-theme="light"] .home-about-backdrop {
  background-color: var(--paper) !important;
  background-image: radial-gradient(ellipse at 50% 45%, #eeede8, var(--paper) 75%);
  color: var(--ink);
}
:root[data-theme="light"] .home-about-backdrop > canvas { filter: invert(1); mix-blend-mode: multiply; opacity: .75; }
:root[data-theme="light"] .home-about-backdrop .home-about,
:root[data-theme="light"] .home-about-backdrop .about-page { background: transparent; }
:root[data-theme] .home-about-backdrop .velaris-logo-part { color: var(--paper) !important; opacity: .45; mix-blend-mode: normal; }
:root[data-theme] .home-about-backdrop .velaris-logo-part path { fill: currentColor; }
:root[data-theme="light"] .home-about-backdrop .secondary-copy { color: var(--muted); }
:root[data-theme] .home-about-backdrop a:focus-visible { outline-color: currentColor; }
:root[data-theme] .home-about-backdrop ::selection { background: var(--ink); color: var(--paper); }
:root[data-theme] .page-curtain,
:root[data-theme] .mobile-menu-dialog,
:root[data-theme] .mobile-menu-dialog::backdrop,
:root[data-theme] .mobile-menu-links a { background: var(--paper); color: var(--ink); }
:root[data-theme] .page-curtain-track { background: color-mix(in srgb, var(--ink) 20%, transparent); }
:root[data-theme] .page-curtain-track::after { background: var(--ink); }
:root[data-theme] .mobile-menu-links a[aria-current="page"],
:root[data-theme] .mobile-menu-links a:hover { background: var(--ink); color: var(--paper); }

/* Header: centered navigation, theme control at the far right. */
.site-header .header-intro { display: none !important; }
html { scrollbar-gutter: stable; }
:root[data-theme] .next-project { background: var(--paper); color: var(--ink); border-block: 1px solid var(--line); }
:root[data-theme] .next-project:hover { background: var(--theme-menu-hover); }
@media (min-width: 641px) {
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .site-header .home-link { justify-self: start; }
  .site-header .main-nav { justify-self: center; }
  .site-header > .theme-dropdown { justify-self: end; margin-left: 0; }
}

/* A themed presentation around the original, unfiltered storefront screens. */
.forma-cover {
  position: relative; display: block; width: 100%; aspect-ratio: 8 / 5;
  background: var(--forma-surface, #e9e7e1); color: var(--ink);
  overflow: hidden; isolation: isolate; container-type: inline-size;
}
.project-art .forma-cover { aspect-ratio: 5 / 2; }
.project-art > .forma-cover { transition: transform .9s var(--ease); transform-origin: center; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .project-art:hover > .forma-cover { transform: scale(1.015); }
}
.forma-cover .forma-cover-copy { position: absolute; left: 5.6%; top: 50%; transform: translateY(-50%); width: 18%; }
.forma-cover img { display: block; width: 100%; height: auto; min-height: 0; max-height: none; object-fit: contain; transform: none !important; filter: none; }
.forma-cover .forma-cover-wordmark { width: 79.12%; border: 0; box-shadow: none; margin-bottom: 20%; }
.forma-cover .forma-cover-caption { font: 400 .65cqw/1.8 ui-monospace, monospace; letter-spacing: .1em; color: var(--muted); text-align: left; }
.forma-cover .forma-cover-desktop,
.forma-cover .forma-cover-mobile { position: absolute; top: 50%; transform: translateY(-50%) !important; border: 1px solid var(--line); box-shadow: 0 8px 30px #0000000a; }
.forma-cover .forma-cover-desktop { left: 27.8%; width: 45.4%; }
.forma-cover .forma-cover-mobile { left: 77.3%; width: 10%; }
:root[data-theme] .forma-wordmark { background: var(--forma-surface); }
:root[data-theme] .forma-wordmark img { max-width: 870px; }
:root[data-theme="dark"] .forma-cover .forma-cover-wordmark,
:root[data-theme="dark"] .forma-wordmark img,
:root[data-theme="dark"] .forma-zoom img[data-forma-wordmark],
:root[data-theme="dark"] .forma-zoom img[src*="/forma/logo/"] { filter: invert(1); }
:root[data-theme] .forma-zoom.is-open::backdrop { background: color-mix(in srgb, var(--paper) 98%, transparent); }
:root[data-theme] .forma-zoom { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; box-sizing: border-box; }
.forma-zoom .forma-zoom-media { display: block; width: fit-content; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); flex: 0 1 auto; transform-origin: top left; }
.forma-zoom .forma-zoom-media > img { display: block; width: auto; height: auto; max-width: calc(100vw - 48px); max-height: calc(100dvh - 48px); object-fit: contain; }
.forma-zoom .forma-zoom-media.is-cover { width: min(1800px, calc(100vw - 48px), calc(160dvh - 76.8px)); }
.forma-zoom-media.is-cover > .forma-cover { width: 100%; }
@media (max-width: 640px) {
  .forma-zoom .forma-zoom-media,
  .forma-zoom .forma-zoom-media > img { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .forma-zoom .forma-zoom-media.is-cover { width: min(calc(100vw - 24px), calc(160dvh - 38.4px)); }
}