@font-face {
  font-family: "SN Geita";
  src: url("fonts/GeitaSN-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow-x: hidden; overflow-x: clip; } /* hidden first: Safari before 16 has no clip. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* No iOS font inflation in landscape. */
body { background: #F5F4F4; font-family: "SN Geita", sans-serif; font-weight: 400; transition: background-color 250ms ease; }
html.work-active body { background-color: #000 !important; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }
button, a { font: inherit; color: white; }
a { text-decoration: none; }
/* The fixed viewing switch blends with whichever section is behind it. */
main { isolation: isolate; background: inherit; }
#hero { position: relative; width: 100%; height: 100vh; height: 100svh; background: inherit; overflow: hidden; }
#grid { position: absolute; inset: 0; pointer-events: none; }
#coordinates { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 130; pointer-events: none; mix-blend-mode: difference; }
#coordinates[hidden] { display: none; }
#hero-overlay { position: fixed; inset: 0; z-index: 125; overflow: hidden; pointer-events: none; mix-blend-mode: normal; }
#hero-overlay * { pointer-events: none; mix-blend-mode: normal; }
.overlay-dust { position: absolute; inset: 0; width: 100%; height: 100%; }
#hero-overlay [hidden] { display: none; }
@media (pointer: coarse), (pointer: none) {
  #coordinates { display: none; }
}
.difference { color: white; mix-blend-mode: difference; }
.identity { position: absolute; }
.wordmark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.circular-logo {
  position: absolute;
  left: calc((619.57 - 26.4) / 1387.2 * 100%);
  top: calc((138.56 - 32.01) / 415.713 * 100%);
  width: calc(200.865 / 1387.2 * 100%);
  height: calc(210.446 / 415.713 * 100%);
  overflow: visible;
}
.circular-logo > :is(svg, img) { display: block; width: 100%; height: 100%; overflow: visible; }
.grid-cell { position: absolute; border: 0.5px solid white; mix-blend-mode: difference; pointer-events: none; }
.grid-cell.solid { background: white; }
.grid-cell.grid-off { visibility: hidden; }
.statement { position: absolute; display: block; appearance: none; border: 0; border-radius: 0; padding: 0; margin: 0; background: transparent; text-align: left; overflow: hidden; }
.statement > .statement-line { position: absolute; white-space: nowrap; width: max-content; }
p { position: absolute; margin: 0; text-align: justify; line-height: 1.2; overflow-wrap: anywhere; }
.menu { position: absolute; }
.menu-link { position: absolute; left: 0; width: max-content; max-width: 100%; white-space: nowrap; line-height: 1.2; }
.menu-link::before, .collaborate::before, .view-pill::before { content: ""; position: absolute; inset: 0; background: white; mix-blend-mode: difference; pointer-events: none; }
.menu-link span, .collaborate > span, .view-pill span { position: relative; display: block; }
.services::before { background: rgba(255, 255, 255, 0.15); }
.collaborate { position: fixed; top: max(28px, env(safe-area-inset-top, 0px)); left: auto; right: max(clamp(20px, 2.78vw, 64px), env(safe-area-inset-right, 0px)); z-index: 124; margin: 0; width: max-content; white-space: nowrap; line-height: normal; mix-blend-mode: difference; }
.collaborate::before { border-radius: 64px; z-index: 120; mix-blend-mode: normal; }
.collaborate > .collaborate-label { z-index: 121; color: black; mix-blend-mode: normal; }
.collaborate .small-cap { display: inline; font-variant-caps: small-caps; font-synthesis: small-caps; }
.collaborate:focus-visible::after { content: ""; position: absolute; inset: -4px; border: 2px solid white; border-radius: 68px; z-index: 122; pointer-events: none; mix-blend-mode: difference; }
.statement-effects { position: absolute; inset: 0; pointer-events: none; color: white; mix-blend-mode: difference; }
.statement-effects * { pointer-events: none; }
/* Hidden once the page scrolls, except in LLM view, where it is the way back. */
html.vasa-scrolled:not([data-view="llm"]) .viewing { visibility: hidden; pointer-events: none; }
.viewing {
  position: fixed;
  inset-inline: 0;
  bottom: max(var(--viewing-margin, 20px), env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: max-content;
  z-index: 124;
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
}
.view-pill { position: relative; padding: 4px 12px; border: 0; border-radius: 64px; background: transparent; line-height: normal; }
.view-pill::before { border: 1px solid white; border-radius: 64px; background: transparent; }
.view-pill.active::before { background: white; }
a:focus-visible, button:focus-visible { outline: 2px solid white; outline-offset: 0; box-shadow: 0 0 0 4px #141414; } /* two-tone ring: visible on the light ground, the dark work section and blended chrome */
:is(.collaborate, .start-pill):focus-visible { outline: none; box-shadow: none; } /* these draw their own blended ring */
.view-switch:focus-visible { box-shadow: none; }
.art-slot { position: absolute; overflow: hidden; mix-blend-mode: normal; contain: layout paint; pointer-events: none; will-change: transform; }
.art-surface { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 572 / 720; transform: translateY(-50%); border: 0; display: block; overflow: hidden; }
.art-surface svg { width: 100%; height: 100%; display: block; }
.art-surface.pending { visibility: hidden; }
.text-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.text-measure { display: block; visibility: hidden; }
.text-stream { position: absolute; inset: 0; }
.menu-link .question-mark { display: inline; }
.dialkit-panel { max-width: calc(100vw - 32px); }
.dialkit-panel-inner { max-width: 100%; }

@media (width < 1024px) {
  #hero {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    padding: 20px;
    align-content: start;
  }
  #hero > :is(.identity, .statement, .intro, .menu, .partnership) { min-width: 0; align-self: start; }
  .identity { display: block; position: relative; grid-column: 1 / 5; aspect-ratio: 1387.2 / 415.713; }
  .statement { position: relative; inset: auto; width: auto; grid-column: 1; display: flex; flex-direction: column; justify-content: space-between; }
  .statement > .statement-line { position: relative; inset: auto; display: block; font-size: clamp(28px, calc(17.4117647059px + 2.9411764706vw), 40px); line-height: 1; }
  .intro, .partnership { position: relative; inset: auto; width: auto; }
  .intro { grid-column: 2 / 5; }
  .menu { position: relative; grid-column: 3 / 5; display: flex; flex-direction: column; align-items: flex-start; }
  .menu-link { position: relative; inset: auto; height: auto; white-space: normal; }
  .menu { gap: 6px; } .menu-link.services, .menu-link.about { margin-top: 14px; } /* Same grouping as desktop. */
  p, .menu-link { font-size: clamp(20px, calc(12.9411764706px + 1.9607843137vw), 28px); line-height: 1.2; }
  .partnership { grid-column: 1 / 5; }
  .collaborate { padding: 8px 24px; }
  .collaborate, .viewing { font-size: clamp(14px, calc(12.2352941176px + 0.4901960784vw), 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .art-slot { will-change: auto; }
  .question-mark { visibility: visible !important; }
}
@keyframes link-blink {
  0%, 49.99% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.menu-link:hover::before, .collaborate:hover::before { animation: link-blink 140ms steps(1, end) infinite; }
@media (prefers-reduced-motion: reduce) {
  .menu-link:hover::before, .collaborate:hover::before { animation: none; }
}
/* Only the default cursor, everywhere, including links and buttons. The one exception is the draggable
   work carousels: grab over them, grabbing while dragged (Huseyin, 2026-11-06). */
*, *::before, *::after { cursor: default !important; }
.work-gallery, .work-gallery * { cursor: grab !important; }
.work-gallery.is-dragging, .work-gallery.is-dragging * { cursor: grabbing !important; }

/* Keep DialKit settings and runtime, suppress its interface until needed again. */
.dialkit-root { display: none !important; }

html.vasa-intro > body > #hero-overlay { visibility:hidden; }
/* FX switch (assets/fx.js): text "FX" and a tiny switch, fixed at the top centre, level with the CTA; hidden once the page scrolls. Blends like the rest of the chrome. */
.fx-toggle { position: fixed; z-index: 124; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: white; font: inherit; line-height: normal; white-space: nowrap; mix-blend-mode: difference; }
.fx-switch { position: relative; display: block; width: 1.5em; height: 0.875em; border: 1px solid currentColor; border-radius: 1em; box-sizing: border-box; transition: background-color 140ms ease; }
.fx-knob { position: absolute; top: 50%; left: 2px; width: calc(0.875em - 6px); height: calc(0.875em - 6px); border-radius: 50%; background: currentColor; transform: translateY(-50%); transition: left 140ms ease, background-color 140ms ease; }
.fx-toggle.active .fx-switch { background: currentColor; }
.fx-toggle.active .fx-knob { left: calc(100% - (0.875em - 6px) - 2px); background: black; }
@media (prefers-reduced-motion: reduce) { .fx-switch, .fx-knob { transition: none; } }
html.vasa-intro .fx-toggle { visibility: hidden; }
html[data-view="llm"] .fx-toggle { display: none; }
html.vasa-scrolled .fx-toggle { visibility: hidden; pointer-events: none; }
/* Link sizes, site-wide: three only. L = section heading links, M = the hero menu size (titles, CTAs, primary buttons),
   S = footer and inline links. Applied at the end of works.css. */
:root { --link-l: clamp(28px, calc(17.4117647059px + 2.9411764706vw), 40px); --link-m: clamp(20px, calc(12.9411764706px + 1.9607843137vw), 28px); --link-s: clamp(16px, 1.25vw, 20px); }
@media (width >= 1024px) { :root { --link-l: min(2.7777777778vw, 4.4444444444svh); --link-m: calc(28 * min(100vw / 1440, 100svh / 900)); } }

/* LLM Mode switch (assets/view-switch.js): replaces the Human/LLM pills with the FX look, bottom centre. */
.viewing.has-switch .view-pill { display: none; }
.view-switch { display: flex; align-items: center; gap: 0.5em; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: white; font: inherit; line-height: normal; white-space: nowrap; }
.view-switch.active .fx-switch { background: currentColor; }
.view-switch.active .fx-knob { left: calc(100% - (0.875em - 6px) - 2px); background: black; }
.view-switch:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.viewing.at-top { inset-inline: auto; bottom: auto; margin-inline: 0; }
/* Homepage LLM view: the switch keeps its hero spot at the top, so the Markdown starts below it and the ASCII logo. */
@media (width >= 768px) { html[data-view="llm"] .llm-panel { padding-top: 128px; } } /* every page: the switch sits top left, the Markdown starts below it */

/* Footer landing for the pill (assets/pill-landing.js): it slides into the footer CTA slot, whose own link hides. */
.collaborate { translate: var(--pill-x, 0px) var(--pill-y, 0px); }
html.pill-lands .footer-cta h3 > a { visibility: hidden; }
.collaborate.is-resizing { box-sizing: border-box; overflow: hidden; transition: width 420ms cubic-bezier(0.23, 1, 0.32, 1); }
.collaborate.is-resizing > .collaborate-label { white-space: nowrap; }
/* Keyboard skip link: off screen until focused. */
.skip-link { position:fixed; left:16px; top:16px; z-index:10000; padding:8px 16px; background:#141414; color:#F5F4F4; font-size:16px; text-decoration:none; transform:translateY(-200%); }
.skip-link:focus { transform:none; outline:1px solid #F5F4F4; outline-offset:2px; }
/* Homepage first frame: the head script sets html.hero-pending on every load; hero.js clears it right after its first fit(),
   so the hero layers never paint at their unplaced CSS defaults (text stacked top left, pill off the grid). */
html.hero-pending #hero > *, html.hero-pending .viewing, html.hero-pending .fx-toggle { visibility: hidden !important; }
/* The LLM mode switch (view-switch.js) replaces the Human/LLM pills; until it mounts, nothing shows, so the pills never flash. */
.viewing:not(.has-switch) { visibility: hidden; }