:root {
  --paper: #f2f1ed;
  --ink: #121212;
  --blue: #2447ff;
  --hair: rgba(18, 18, 18, .22);
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --logo-left: clamp(1.2rem, 2.5vw, 2.4rem);
  --logo-top: 17.1px;
  --logo-size: 32px;
  --field-opacity: 1;
  --identity-patch-left: 0px;
  --identity-patch-top: 0px;
  --identity-patch-width: 1px;
  --identity-patch-height: 1px;
  --header-progress: 0;
  --logo-progress: 0;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--mono);
}
body.oa-v13-cold-open { overflow: hidden !important; }

html[data-oa-local-cold-open^="skipped"] .story-engine,
html[data-oa-local-cold-open^="skipped"] .engine-skip,
html[data-oa-local-cold-open^="skipped"] .sr-status {
  display: none !important;
}

/* Keep the document scrollbar out of the authored cold-open handoff. The
   selector releases automatically when the runtime marks the sequence
   complete, so normal page scrolling needs no compensating class. */
html[data-oa-v13-cold-open="active"],
html[data-oa-v13-cold-open="active"] body {
  overflow: hidden !important;
  overscroll-behavior: none;
  scrollbar-width: none;
}
html[data-oa-v13-cold-open="active"]::-webkit-scrollbar,
html[data-oa-v13-cold-open="active"] body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* The destination is not visible until the ASCII field handoff. Skip its
   expensive first layout/paint while the opening copy establishes itself;
   the runtime removes this gate during the first authored static hold. */
body.oa-v13-cold-open:not(.oa-v13-site-prepared) #oa-v13-site[inert] {
  content-visibility: hidden;
  contain-intrinsic-size: 100vw 600vh;
}

/* Destination layout can be prepared during a still reading beat, but it must
   not paint or run decorative animation underneath the opaque cold open. */
body.oa-v13-cold-open:not(.oa-v13-site-renderable) #oa-v13-site[inert] {
  visibility: hidden;
}

body.oa-v13-cold-open:not(.oa-v13-site-renderable) #oa-v13-site[inert] *,
body.oa-v13-cold-open:not(.oa-v13-site-renderable) #oa-v13-site[inert] *::before,
body.oa-v13-cold-open:not(.oa-v13-site-renderable) #oa-v13-site[inert] *::after {
  animation-play-state: paused !important;
}

/* Keep the Home landing (header, hero, and canonical ASCII identity) fully
   renderable while allowing the browser to skip four genuinely off-screen
   sections. `auto` preserves normal scrolling and accessibility; the stored
   intrinsic block sizes prevent the document from jumping when a section
   approaches the viewport and receives its first real layout. */
body.oa-v13-cold-open #oa-v13-site #index {
  content-visibility: auto;
  contain-intrinsic-size: auto 1500px;
}
body.oa-v13-cold-open #oa-v13-site #recognition {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
body.oa-v13-cold-open #oa-v13-site #about {
  content-visibility: auto;
  contain-intrinsic-size: auto 1300px;
}
body.oa-v13-cold-open #oa-v13-site #contact {
  content-visibility: auto;
  contain-intrinsic-size: auto 1200px;
}

/* One preparation-only partition lets the browser resolve the header/hero
   and the current/identity section in separate frames. It is removed before
   Home becomes renderable, so it never changes a visible landing frame. */
body.oa-v13-cold-open #oa-v13-site #current.oa-v13-current-layout-gated {
  content-visibility: hidden;
  contain-intrinsic-size: 1100px;
}
button { font: inherit; }

.story-engine {
  position: fixed;
  inset: 0;
  z-index: 10090;
  min-height: 100svh;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  overscroll-behavior: none;
  touch-action: none;
}

.story-engine.is-handing-off {
  background: transparent;
  pointer-events: none;
  will-change: opacity;
}

/* Direct cold-open handoff. This intentionally mirrors the site's approved
   inner-route slat grammar: an ink plane covers first, the small transition
   mark resolves only under full cover, and the same slats open to Home. */
.story-engine.is-under-ink {
  background: transparent;
  pointer-events: none;
}

.story-engine.is-under-ink > :not(.oa-v13-ink-canvas):not(.oa-v13-ink-handoff-mark) {
  visibility: hidden;
}

.story-engine.is-under-ink.is-held {
  pointer-events: auto;
}

/* Destination interaction runtimes are deliberately prepared behind the
   opaque handoff so Home can open without a loading flash. V28's locked eye
   and trail use viewport-level z-indices, however, so they must remain
   visually retired until the cold-open owner is removed. This keeps the
   black plane pure (acid OA mark only) without changing either cursor system
   in its authored interactive state. */
body.oa-v13-cold-open .v28-panel-nav-cursor,
body.oa-v13-cold-open .v28-panel-nav-trail,
body.oa-v13-cold-open .oa-live-eye-arrow-cursor,
body.oa-v13-cold-open .oa-live-eye-arrow-trail,
body.oa-v13-cold-open #cursor,
body.oa-v13-cold-open .oa-cursor-pixel-trail,
body.oa-v13-cold-open .oa-pixel-hover-fill {
  opacity: 0 !important;
  visibility: hidden !important;
}

html[data-oa-v13-cursor-handoff="1"] #cursor {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* V191 desktop featured-hero density study. The approved carousel composition,
   copy, controls, and media behavior stay intact; only its vertical measure is
   capped so the hero reads as a cinematic editorial strip on wide screens. */
@media (min-width: 761px) {
  #oa-v13-site .showcase-rail {
    height: clamp(22rem, 36vw, 38rem);
  }

  #oa-v13-site .showcase-rail > .hero-feature,
  #oa-v13-site .showcase-rail > .showcase-next {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* V247 wide-desktop density lock. Reveal more of the editorial metadata below
   the hero without narrowing the lateral project field or changing compact
   and touch layouts. */
@media (min-width: 1100px) {
  #oa-v13-site .showcase-rail {
    height: clamp(20rem, 32vw, 34rem);
  }
}

/* Match the wide-screen hero offset to the fixed 67.2px broadcast header.
   The former 4rem reservation ended three pixels early and exposed paper
   between the header rule and the carousel. */
@media (min-width: 681px) {
  #oa-v13-site .hero {
    padding-top: 4.2rem !important;
    gap: 0 !important;
  }

  #oa-v13-site .hero > .showcase-rail {
    margin-top: 0 !important;
    transform: translateY(-1px);
  }
}

/* V192 navigation lock. Keep the authored menu label in its permanent layout
   position while the existing cursor object still expands into its outline.
   The traveling duplicate label is suppressed; hit areas and navigation are
   unchanged. */
@media (hover: hover) and (pointer: fine) {
  #oa-v13-site .bar-nav > a.is-oa-pixel-hover-active::before,
  #oa-v13-site .bar-nav > a.is-oa-pixel-hover-releasing::before {
    opacity: 1 !important;
    transform: none !important;
  }

  #oa-v13-site.oa-pixel-nav-morph .oa-pixel-hover-fill[data-oa-nav-label]::after,
  html.oa-pixel-nav-morph #oa-v13-site .oa-pixel-hover-fill[data-oa-nav-label]::after {
    display: none !important;
    content: none !important;
    animation: none !important;
  }

  /* The cursor housing is appended directly to body, outside #oa-v13-site. */
  html.oa-pixel-nav-morph .oa-pixel-hover-fill[data-oa-nav-label]::after {
    display: none !important;
    content: none !important;
    animation: none !important;
  }
}

/* V196 single-owner header handoff. After the cold open releases the live
   Home, prevent the frozen Home entrance timeline from hiding and replaying
   the already revealed logo/navigation. */
html[data-oa-v13-handoff="complete"] #oa-v13-site :is(.bar-logo, .bar-nav) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* The former floating CASE STUDY chip was explicitly retired from the locked
   Home hero. Keep its link out of the painted carousel while leaving the
   project available through the authored Work index. */
#oa-v13-site .hero .hero-feature-links {
  display: none !important;
}

/* A successful cold-open arrival keeps the existing anchored Home mark ink
   black. The published blue raster remains untouched and returns on reload;
   hover/focus stay ink and the authored active-state acid filter still wins. */
html[data-oa-v13-ink-home-mark="1"] #oa-v13-site .oa-home-mark img {
  filter: brightness(0) !important;
}

html[data-oa-v13-ink-home-mark="1"] #oa-v13-site .oa-home-mark:active img {
  filter: var(--oa-home-mark-acid-filter) !important;
}

/* V210 four-project featured carousel. Preserve the locked 80/32 editorial
   field and title geometry; only the media/copy plate changes. */
#oa-v13-site .showcase-rail > :is(.hero-feature, .showcase-next),
#oa-v13-site .hero-ascii-title > :is(strong, em),
#oa-v13-site .hero-feature-kicker :is(i, small),
#oa-v13-site .hero-feature-role,
#oa-v13-site .hero-meta > span {
  transition: opacity .22s ease, transform .44s cubic-bezier(.22, 1, .36, 1);
}

#oa-v13-site .showcase-rail.is-switching > :is(.hero-feature, .showcase-next) {
  opacity: .58;
}

#oa-v13-site .showcase-rail.is-switching[data-carousel-direction="next"] > :is(.hero-feature, .showcase-next) {
  transform: translate3d(-1.25rem, 0, 0);
}

#oa-v13-site .showcase-rail.is-switching[data-carousel-direction="previous"] > :is(.hero-feature, .showcase-next) {
  transform: translate3d(1.25rem, 0, 0);
}

/* V255 single-owner thumbnail motion. The feature field may retain its
   directional transition, but the lateral panel itself stays locked so it
   cannot move away and rebound underneath the image's scale-down. */
#oa-v13-site .showcase-rail.is-switching > .showcase-next,
#oa-v13-site .showcase-rail.is-switching[data-carousel-direction="next"] > .showcase-next,
#oa-v13-site .showcase-rail.is-switching[data-carousel-direction="previous"] > .showcase-next {
  opacity: 1;
  transform: none;
}

#oa-v13-site .hero-signal-video.is-carousel-suspended {
  opacity: 0 !important;
  visibility: hidden !important;
}

#oa-v13-site .hero-feature.is-carousel-video-loading > img {
  opacity: 1 !important;
  visibility: visible !important;
}

#oa-v13-site .hero-feature.is-carousel-video-loading .hero-signal-video {
  opacity: 0 !important;
}

#oa-v13-site .hero-feature.is-carousel-local-ready .hero-signal-video {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Staging repair: only a frame belonging to the committed slide may replace
   its already-decoded poster. Legacy intro classes cannot override this. */
html[data-oa-featured-carousel="installed"] #oa-v13-site .hero-feature:not(.is-carousel-local-ready) > img {
  opacity: 1 !important;
  visibility: visible !important;
}
html[data-oa-featured-carousel="installed"] #oa-v13-site .hero-feature:not(.is-carousel-local-ready) .hero-signal-video {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
html[data-oa-featured-carousel="installed"] #oa-v13-site .hero-feature.is-carousel-local-ready > img {
  opacity: 0 !important;
}
/* A stopped decoder is hidden immediately. Restore its already-decoded poster
   in that same paint; a fade here would briefly expose an empty black panel. */
html[data-oa-featured-carousel="installed"] #oa-v13-site .hero-feature.is-carousel-rebuffering > img:not([data-oa-carousel-image-failed="true"]) {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}
/* Reduced-motion poster ownership must apply in the same style recalculation
   that hides the movie, even before its media-query change callback runs. */
@media (prefers-reduced-motion: reduce) {
  html[data-oa-featured-carousel="installed"] #oa-v13-site .hero-feature > img:not([data-oa-carousel-image-failed="true"]) {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }
  html[data-oa-featured-carousel="installed"] #oa-v13-site .hero-feature .hero-signal-video {
    opacity: 0 !important;
    visibility: hidden !important;
    transition: none !important;
  }
}
.oa-carousel-status {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 8;
  max-width: 70%;
  padding: 8px 12px;
  transform: translateX(-50%);
  color: #121212;
  background: #f2f1ed;
  font-size: 11px;
  line-height: 1.4;
  pointer-events: none;
}
.oa-carousel-status:empty { display: none; }

/* Keep a failed carousel image's native icon/alt rendering out of the artwork.
   Its project title, film action and recovery status remain separately labelled. */
html[data-oa-featured-carousel] #oa-v13-site .showcase-rail :is(.hero-feature, .showcase-next) img[data-oa-carousel-image-failed="true"] {
  visibility: hidden !important;
}

#oa-v13-site .hero-feature.is-carousel-still > img {
  opacity: 1 !important;
  visibility: visible !important;
  animation: oa-carousel-still-drift 10s cubic-bezier(.45, 0, .55, 1) infinite alternate;
}

/* V257 locked-thumbnail dissolve. The outgoing clone and incoming art occupy
   the same crop, so the project changes once without scale or panel motion. */
#oa-v13-site .showcase-next img.oa-thumbnail-outgoing,
#oa-v13-site .showcase-next img.is-oa-thumbnail-dissolving {
  position: absolute;
  inset: 0;
  transition: none !important;
}

#oa-v13-site .showcase-next img {
  transition-property: opacity !important;
}

#oa-v13-site .showcase-next img.oa-thumbnail-outgoing {
  z-index: 1;
  pointer-events: none;
}

#oa-v13-site .showcase-next img.is-oa-thumbnail-dissolving {
  z-index: 2;
  opacity: 0;
}

#oa-v13-site .showcase-next img.oa-thumbnail-outgoing.is-oa-thumbnail-outgoing-running {
  animation: oa-thumbnail-dissolve-out .22s ease-out both;
}

#oa-v13-site .showcase-next img.is-oa-thumbnail-dissolving.is-oa-thumbnail-dissolving-running {
  animation: oa-thumbnail-dissolve-in .22s ease-out both;
}

@keyframes oa-thumbnail-dissolve-out { to { opacity: 0; } }
@keyframes oa-thumbnail-dissolve-in { to { opacity: 1; } }

#oa-v13-site .hero.is-carousel-switching .hero-ascii-title > :is(strong, em),
#oa-v13-site .hero.is-carousel-switching .hero-feature-kicker :is(i, small),
#oa-v13-site .hero.is-carousel-switching .hero-feature-role,
#oa-v13-site .hero.is-carousel-switching .hero-meta > span {
  opacity: 0;
}

#oa-v13-site .hero.is-carousel-switching[data-carousel-direction="next"] .hero-ascii-title > :is(strong, em),
#oa-v13-site .hero.is-carousel-switching[data-carousel-direction="next"] .hero-feature-kicker :is(i, small),
#oa-v13-site .hero.is-carousel-switching[data-carousel-direction="next"] .hero-feature-role {
  transform: translate3d(-.7rem, 0, 0);
}

#oa-v13-site .hero.is-carousel-switching[data-carousel-direction="previous"] .hero-ascii-title > :is(strong, em),
#oa-v13-site .hero.is-carousel-switching[data-carousel-direction="previous"] .hero-feature-kicker :is(i, small),
#oa-v13-site .hero.is-carousel-switching[data-carousel-direction="previous"] .hero-feature-role {
  transform: translate3d(.7rem, 0, 0);
}

@keyframes oa-carousel-still-drift {
  from { transform: scale(1.012) translate3d(-.15%, 0, 0); }
  to { transform: scale(1.032) translate3d(.25%, -.18%, 0); }
}

#oa-v13-site .oa-featured-carousel-control {
  position: absolute;
  z-index: 14;
  top: 0;
  bottom: 0;
  width: 18%;
  padding: 0;
  overflow: hidden;
  clip-path: none;
  opacity: 0;
  color: transparent;
  background: transparent;
  border: 0;
  cursor: none;
}

#oa-v13-site .oa-featured-carousel-previous { left: 0; }
#oa-v13-site .oa-featured-carousel-next { right: 0; }

#oa-v13-site .oa-featured-carousel-control:focus-visible {
  clip-path: none;
  opacity: 1;
  width: 18%;
  height: auto;
  inset: 0 auto 0 0;
  color: transparent;
  background: transparent;
  outline: 0;
  box-shadow: inset 3px 0 0 var(--blue);
}

#oa-v13-site .oa-featured-carousel-next:focus-visible {
  right: 0;
  left: auto;
  box-shadow: inset -3px 0 0 var(--blue);
}

/* The shared work-card echo is not part of the fixed navigation language.
   Retire it while the pointer is in the nav so a fast crossing cannot leave
   cobalt rectangles hanging behind the labels. */
body:has(#oa-v13-site .bar-nav:hover) > .oa-shared-outline-field {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #oa-v13-site .showcase-rail > :is(.hero-feature, .showcase-next),
  #oa-v13-site .hero-ascii-title > :is(strong, em),
  #oa-v13-site .hero-feature-kicker :is(i, small),
  #oa-v13-site .hero-feature-role,
  #oa-v13-site .hero-meta > span {
    transition: none;
  }
  #oa-v13-site .hero-feature.is-carousel-still > img { animation: none; }
  #oa-v13-site .showcase-next img.oa-thumbnail-outgoing,
  #oa-v13-site .showcase-next img.is-oa-thumbnail-dissolving {
    animation: none;
  }
  #oa-v13-site .showcase-next img.oa-thumbnail-outgoing { display: none; }
  #oa-v13-site .showcase-next img.is-oa-thumbnail-dissolving { opacity: 1; }
}

@media (max-width: 760px), (hover: none), (pointer: coarse) {
  /* Thumb swipe is the visible mobile navigation. Retain non-gesture controls
     for assistive technology and reveal text controls only on keyboard focus. */
  #oa-v13-site .showcase-rail { touch-action: pan-y pinch-zoom; }
  #oa-v13-site .showcase-next-arrow { display: none; }
  #oa-v13-site .oa-featured-carousel-control {
    pointer-events: none;
    top: auto;
    bottom: 12px;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    opacity: 0;
  }
  #oa-v13-site .oa-featured-carousel-previous { left: 12px; }
  #oa-v13-site .oa-featured-carousel-next { right: 12px; }
  #oa-v13-site .oa-featured-carousel-control:focus-visible {
    inset: auto auto 12px 12px;
    width: auto;
    max-width: calc(50% - 18px);
    height: 44px;
    padding: 0 .65rem;
    clip-path: none;
    opacity: 1;
    pointer-events: auto;
    font-size: 10px;
    color: var(--blue, #2447ff);
    background: var(--paper, #f2f1ed);
    box-shadow: inset 0 0 0 1px currentColor;
  }
  #oa-v13-site .oa-featured-carousel-next:focus-visible {
    right: 12px;
    left: auto;
  }
}

.oa-v13-ink-canvas {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  touch-action: none;
}

.oa-v13-ink-handoff-mark {
  position: absolute;
  z-index: 110;
  top: var(--oa-v13-ink-mark-top, 17.1px);
  left: var(--oa-v13-ink-mark-left, var(--logo-left));
  display: grid;
  place-items: center;
  width: var(--oa-v13-ink-mark-width, 32px);
  height: var(--oa-v13-ink-mark-height, 32px);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: transparent;
  mix-blend-mode: normal;
  /* Visibility is owned by the painted logo/opening timelines. A CSS fade
     here left frame 0 nearly transparent after full cover, which read as a
     missing logo on contended cold launches. */
  transition: none;
  will-change: opacity;
}

.oa-v13-ink-handoff-mark.is-running {
  opacity: 1;
}

.oa-v13-ink-handoff-mark.is-over-paper {
  filter: brightness(0);
}

.oa-v13-ink-handoff-mark.is-mark-releasing {
  opacity: 0;
}

.oa-v13-ink-handoff-mark img,
.oa-v13-ink-handoff-mark canvas {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  transform: scale(3);
  transform-origin: center;
}

.ascii-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--paper);
  opacity: 0;
  transition: none;
}
.story-engine.is-field-ready .ascii-scene { opacity: 1; }
.story-engine.is-signal-rail .ascii-scene { opacity: 1; }
.story-engine.is-exiting .ascii-scene { opacity: 1; transition: none; }
.story-engine.is-resolved .ascii-scene { opacity: 1; }
.story-engine.is-handing-off .ascii-scene,
.story-engine.is-handing-off .engine-header {
  opacity: 0;
  will-change: opacity;
  transition: opacity var(--handoff-duration, 220ms) var(--handoff-ease, cubic-bezier(.22, 1, .36, 1));
}

.ascii-scene::after {
  position: absolute;
  inset: clamp(.55rem, 1.15vw, 1.1rem);
  z-index: 3;
  border: 1px solid rgba(18, 18, 18, .14);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms cubic-bezier(.22, 1, .36, 1);
}
.story-engine.is-field-ready:not(.is-copy-expanding):not(.is-exiting):not(.is-resolved) .ascii-scene::after {
  opacity: 1;
}
.story-engine.is-exiting .ascii-scene::after,
.story-engine.is-resolved .ascii-scene::after { opacity: 0; }
.story-engine.is-signal-rail:not(.is-field-ready) .ascii-scene::after,
.story-engine.is-copy-expanding .ascii-scene::after {
  opacity: 0;
}

.ascii-field,
.ascii-identity-patch,
.ascii-identity-paper,
.ascii-identity-detail,
.ascii-identity-text,
.signal-trail {
  position: absolute;
  display: block;
  pointer-events: none;
}
.ascii-field,
.signal-trail {
  inset: 0;
  width: 100%;
  height: 100%;
}
.ascii-field {
  z-index: 1;
  opacity: var(--field-opacity);
  /* Large DPR-2 desktops intentionally use a bounded backing store. Preserve
     whole-pixel glyph edges when the compositor scales that raster. */
  image-rendering: pixelated;
}
.ascii-identity-patch {
  left: var(--identity-patch-left);
  top: var(--identity-patch-top);
  z-index: 1;
  width: var(--identity-patch-width);
  height: var(--identity-patch-height);
  opacity: var(--field-opacity);
  /* The attached patch follows the field's paint clock and sits later in the
     same z1 stack, above the capped field but below the z2 cursor trail. */
  contain: strict;
  /* The patch owns a true-DPR backing store. Nearest-neighbour presentation
     keeps its registered glyph grid and SVG knockout from being softened a
     second time by the compositor. */
  image-rendering: pixelated;
}

/* The selected V50 reference is already painted at its native DPR-2 backing
   geometry. Let the browser present that exact antialiased text/vector raster;
   nearest-neighbour scaling belongs only to the later bounded-1x path. */
.story-engine[data-field-renderer="v50-whole-glyph"][data-raster-mode="native"] .ascii-field {
  image-rendering: auto;
}

.story-engine[data-field-renderer="v50-whole-glyph"][data-raster-mode="bounded"] .ascii-field {
  image-rendering: pixelated;
}

.story-engine[data-field-renderer="v50-whole-glyph"] .ascii-identity-patch {
  image-rendering: pixelated;
}

/* V163 uses the approved Home banner's actual settled architecture: one
   full-density native IBM Plex Mono slice of the committed ocean field with
   the canonical SVG applied as a paper aperture above it. A second native
   glyph plate is clipped by the same SVG and retains only sparse wave-driven
   marks, so a pale crest cannot erase the wordmark. Canvas remains the sole
   painter during the organic build; both native plates are primed invisibly
   before they cover the pixel-identical full field atomically. */
.ascii-identity-paper,
.ascii-identity-detail,
.ascii-identity-text {
  z-index: 1;
  visibility: hidden;
  opacity: var(--field-opacity);
  transition: none;
  pointer-events: none;
}

.ascii-identity-paper {
  left: var(--identity-dom-logo-left, 0px);
  top: var(--identity-dom-logo-top, 0px);
  width: var(--identity-dom-logo-width, 1px);
  height: var(--identity-dom-logo-height, 1px);
  background: var(--paper);
  -webkit-mask-image: url("/work/logo-master.svg?v=3");
  mask-image: url("/work/logo-master.svg?v=3");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  contain: strict;
}

.ascii-identity-text,
.ascii-identity-detail {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  -webkit-text-fill-color: currentColor;
  font-family: var(--mono, "IBM Plex Mono", monospace);
  font-size: var(--identity-dom-font-size, 8px);
  font-weight: 500;
  font-synthesis: none;
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: 0;
  line-height: .82;
  white-space: pre;
  user-select: none;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  contain: layout paint style;
}

.ascii-identity-detail {
  background: transparent;
  -webkit-mask-image: url("/work/logo-master.svg?v=3");
  mask-image: url("/work/logo-master.svg?v=3");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position:
    var(--identity-dom-logo-left, 0px)
    var(--identity-dom-logo-top, 0px);
  mask-position:
    var(--identity-dom-logo-left, 0px)
    var(--identity-dom-logo-top, 0px);
  -webkit-mask-size:
    var(--identity-dom-logo-width, 1px)
    var(--identity-dom-logo-height, 1px);
  mask-size:
    var(--identity-dom-logo-width, 1px)
    var(--identity-dom-logo-height, 1px);
}

.story-engine.is-dom-identity-live .ascii-identity-paper,
.story-engine.is-dom-identity-live .ascii-identity-detail,
.story-engine.is-dom-identity-live .ascii-identity-text {
  visibility: visible;
}

.story-engine.is-dom-identity-canvas-retired .ascii-field,
.story-engine.is-dom-identity-canvas-retired .ascii-identity-patch {
  visibility: hidden;
}
.story-engine.is-signal-rail:not(.is-field-ready) .ascii-field { opacity: 0; }
.story-engine.is-signal-rail:not(.is-field-ready) .ascii-identity-patch { opacity: 0; }
.story-engine.is-signal-rail:not(.is-field-ready) .ascii-identity-paper,
.story-engine.is-signal-rail:not(.is-field-ready) .ascii-identity-detail,
.story-engine.is-signal-rail:not(.is-field-ready) .ascii-identity-text { visibility: hidden; }
.story-engine.is-exiting .ascii-field { opacity: 1; }
.story-engine.is-exiting .ascii-identity-patch { opacity: 1; }
.signal-trail { z-index: 2; }
.story-engine.is-signal-rail.is-signal-rail-prelude .ascii-scene {
  /* Keep the field unstacked during copy absorption: field z1 stays below
     copy z4 while the trail itself can participate at z5 above the copy. */
  z-index: auto;
  isolation: auto;
  background: transparent;
  will-change: auto;
}
.story-engine.is-signal-rail.is-signal-rail-prelude .signal-trail { z-index: 5; }

@media (hover: hover) and (pointer: fine) {
  .story-engine.has-custom-cursor,
  .story-engine.has-custom-cursor * { cursor: none !important; }
}

.ocean-source {
  position: fixed;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.engine-copy {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 4rem var(--logo-left);
  pointer-events: none;
  clip-path: inset(0 var(--copy-wipe-right, 0%) 0 0);
}
.engine-copy p {
  margin: 0;
  padding: .24rem .38rem;
  color: var(--ink);
  background: var(--paper);
  font: 400 clamp(.62rem, .72vw, .74rem)/1.45 var(--signal-rail-copy-font, var(--mono));
  font-synthesis: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "calt" 0;
  letter-spacing: .025em;
  text-align: left;
  white-space: pre-line;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 220ms cubic-bezier(.22, 1, .36, 1), transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.story-engine.is-signal-rail .engine-copy.is-wiping {
  will-change: clip-path;
}
.story-engine.is-signal-rail .engine-copy.is-wiped {
  will-change: auto;
}
.engine-copy.is-changing p { opacity: 0; transform: translate3d(0, .25rem, 0); }
.story-engine.is-exiting .engine-copy,
.story-engine.is-resolved .engine-copy { opacity: 0; }

.engine-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 7;
  height: 67.2px;
  color: var(--ink);
  border-bottom: 1px solid rgba(18, 18, 18, calc(var(--header-progress) * .22));
  pointer-events: none;
}
.engine-home {
  position: absolute;
  top: var(--logo-top);
  left: var(--logo-left);
  display: block;
  width: var(--logo-size);
  height: var(--logo-size);
}
.engine-final-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--logo-progress);
  filter: brightness(0) saturate(100%) invert(7%);
}
.engine-nav {
  position: absolute;
  top: 12px;
  right: var(--logo-left);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  width: auto;
  height: 44px;
  opacity: var(--header-progress);
  transform: translate3d(0, calc((1 - var(--header-progress)) * -4px), 0);
}
.engine-nav a {
  --oa-nav-label: "";
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 44px;
  padding: .52rem .62rem .48rem;
  overflow: hidden;
  color: var(--ink);
  background: transparent;
  font-size: 0;
  line-height: 1;
  text-decoration: none;
  isolation: isolate;
}
.engine-nav a:nth-child(1) { --oa-nav-label: "01  WORK"; width: 4.5rem; }
.engine-nav a:nth-child(2) { --oa-nav-label: "02  CASE STUDIES"; width: 8rem; }
.engine-nav a:nth-child(3) { --oa-nav-label: "03  ABOUT"; width: 5rem; }
.engine-nav a:nth-child(4) { --oa-nav-label: "04  PRESS"; width: 5rem; }
.engine-nav a:nth-child(5) { --oa-nav-label: "05  CONTACT"; width: 6rem; }
.engine-nav a::before {
  display: block;
  color: inherit;
  font: 400 clamp(.56rem, .66vw, .68rem)/1 var(--mono);
  letter-spacing: .045em;
  white-space: pre;
  content: var(--oa-nav-label);
}
.engine-nav a:first-child { color: var(--blue); }

@media (min-width: 681px) and (max-width: 980px) {
  .engine-nav { top: 11.1015625px; }
}

.engine-skip {
  position: fixed;
  z-index: 10120;
  top: .6rem;
  left: .6rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  color: var(--paper);
  background: var(--ink);
}
.engine-skip:focus-visible {
  width: auto;
  height: auto;
  min-height: 44px;
  padding: .7rem .85rem;
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  clip-path: none;
}
.sr-only,
.sr-status {
  position: fixed;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 680px) {
  :root {
    --logo-left: 12px;
    --logo-top: 17.5px;
    --logo-size: 24px;
  }
  .engine-copy { padding-inline: var(--logo-left); }
  .engine-copy p { max-width: 31ch; font-size: .62rem; }
  .story-engine.is-signal-rail .engine-copy p { max-width: none; }
  .engine-header { height: 60px; }
  .engine-nav {
    top: 7.5px;
    right: 12px;
    left: calc(var(--logo-left) + var(--logo-size) + clamp(.28rem, 1.4vw, .5rem));
    justify-content: flex-end;
    gap: 0;
    width: auto;
    height: 44px;
  }
  .engine-nav a {
    flex: 0 0 auto;
    width: auto !important;
    min-height: 44px;
    padding: .34rem clamp(.18rem, .65vw, .3rem) .3rem;
  }
  .engine-nav a::before {
    font-size: clamp(.48rem, 2.05vw, .56rem);
    letter-spacing: -.015em;
    line-height: 1.16;
    text-align: left;
    white-space: pre-line;
  }
  .engine-nav a:nth-child(1) { --oa-nav-label: "01\A WORK"; }
  .engine-nav a:nth-child(2) { --oa-nav-label: "02\A CASE STUDIES"; }
  .engine-nav a:nth-child(3) { --oa-nav-label: "03\A ABOUT"; }
  .engine-nav a:nth-child(4) { --oa-nav-label: "04\A PRESS"; }
  .engine-nav a:nth-child(5) { --oa-nav-label: "05\A FOLLOW /\A CONTACT"; }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  .story-engine { display: none !important; }
  .engine-skip {
    width: auto;
    height: auto;
    min-height: 44px;
    padding: .7rem .85rem;
    clip-path: none;
  }
}