/* Works, direction E. Loaded after the site stylesheet, so every colour, radius, font and spacing below is a live
   iklipse variable (Lumos light and dark) or arithmetic on one. One screen of work on the theme's own ground: no gradient
   canvas, no marquee, no reading bars, no monospace numerals. Tile and row sizes are set by works.js from the screen
   (three rows from 768 px up, four on a phone) and arrive here as --we-iw, --we-ih and --we-cap. */
/* slop-ok: SLOP-16 - the type ladder is iklipseworld.com's own (h2, body 16, label 14), read from the live tokens */
/* slop-ok: SLOP-25 - leading is set as the live site sets it (120 to 150 %), so this page matches the nav and the case pages */
/* slop-ok: SLOP-07 - radii are live tokens: huge for tiles, window and dock, xhuge for the pop-up panel, xsmall and large for the live pill and the options panel, round for the dot and two icon buttons */
/* slop-ok: SLOP-18 - spacing is the live site's rem steps and the grid gap works.js derives from the screen */
/* slop-ok: SLOP-02 - no gradient anywhere; the veil is one flat colour at an alpha */
/* slop-ok: SLOP-35 - buttons take font: inherit, so they carry the site's own declared stack (Excon, Arial, sans-serif) */
/* slop-ok: SLOP-27 - 991 and 767 are Webflow's tablet and phone breakpoints, the live site's own, not text measures */

main[data-works-root].we { background-color: var(--_theme---s-bg-t1); color: var(--_theme---s-text); }
/* Round 9: the shell leaves body white in dark mode, and the canvas takes body's colour, so a frame not yet rastered
   during a scroll showed as a white band across the field (headless, 16 Oct: 6 of 6 frames mid-glide, 3 of 6 under the
   old arrow). In dark mode the canvas is the theme's ground; every section paints its own ground over it as before. */
html.u-theme-dark body { background-color: var(--_theme---s-bg); }
html.we-locked, html.we-locked body { overflow: hidden; }

/* ---------- the stage: the first screen, all of it ---------- */
.we-stage {
  position: relative; height: 100vh; height: 100svh; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  background-color: var(--_theme---s-bg-t1);
}
.we-stage.is-dragging { cursor: grabbing; }
.we-stage.is-dragging .we-tile { pointer-events: none; }
.we-plane { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
/* the perspective is set per frame by works.js from the tuner (Perspective, FOV from speed) */
.we-tile {
  position: absolute; left: 0; top: 0; width: var(--we-iw); display: block;
  color: inherit; text-decoration: none; will-change: transform; -webkit-user-drag: none;
}
.we-tile[hidden] { display: none; }
.we-tile:focus-visible { outline: 2px solid var(--_colors---primary--orange); outline-offset: 4px; border-radius: var(--border-radius--huge); }
.we-card { display: block; transform-origin: 50% 50%; transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .7s ease, filter .9s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--we-d, 0ms); }
/* Round 8 filter: a tile outside the picked categories greys out, steps back in its cell and darkens, eased both ways;
   it takes no clicks while the filter is on (works.js). Matching tiles do not change. */
.we-tile.is-out { pointer-events: none; }
.we-tile.is-out .we-card { transform: scale(.86); filter: grayscale(1) brightness(.45); }
.we.is-intro .we-card { opacity: 0; transform: translateY(40px) scale(.94); transition: none; }
/* Round 11, the globe (works.js, WorksE.globe): only while it shows. The plane becomes one 3D context so front tiles pass in
   front of back tiles and of the core; the captions come in with the morph (works.js writes each drawn tile's caption
   opacity, 0 on the globe, 1 at the field), each caption its own layer while it fades, so the fade never repaints its tile. With
   the class off, none of this applies and the field is today's. The core is hidden whenever the class is off. */
.we.is-globe .we-plane { transform-style: preserve-3d; }
.we.is-globe .we-cap { opacity: 0; }
.we.is-capfade .we-cap { will-change: opacity; }
.we-core {
  position: absolute; left: 0; top: 0; display: grid; place-items: center; pointer-events: none;
  transform-style: preserve-3d; will-change: transform;
}
.we-core[hidden] { display: none; }
.we-img {
  position: relative; display: block; width: var(--we-iw); height: var(--we-ih); overflow: hidden;
  border-radius: var(--border-radius--huge); clip-path: inset(0 round var(--border-radius--huge));
  background-color: var(--_theme---s-bg-t3);
}
.we-img img {
  width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0;
  transition: opacity .5s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1); pointer-events: none;
}
.we-tile.is-loaded .we-img img { opacity: 1; }
.we-cap {
  display: flex; align-items: baseline; gap: .75rem; height: var(--we-cap); padding: .625rem .25rem 0; min-width: 0;
  font-size: 1rem; line-height: 1.25;
}
.we-name { flex: none; max-width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: var(--_typography---font-weight--medium); }
.we-cats { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; font-size: .875rem; opacity: .62; }
/* names always show, as plain type on the ground: no box, no pill (Omar, 15 Oct 11:4x) */
/* a tile under 400 px keeps the name alone, so the line never crams two ellipses together */
.we-tile { container-type: inline-size; }
@container (max-width: 25rem) { .we-cats { display: none; } .we-name { max-width: none; } }

@media (hover: hover) and (pointer: fine) {
  .we-tile:hover .we-img img { transform: scale(1.045); }
  /* off while the field travels (works.js sets is-moving): a parked cursor would start the zoom on every tile passing under it */
  .we-stage.is-moving .we-tile:hover .we-img img { transform: none; }
}

/* ---------- the dock: the filter pills, one solid bar at the bottom (round 7: no "Works" word; round 9: the arrow left it for Exit) ---------- */
.we-dock {
  position: absolute; left: 1rem; right: 1rem; bottom: 1.25rem; margin-inline: auto; width: fit-content; max-width: calc(100% - 2rem); box-sizing: border-box; z-index: 5;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem; border-radius: calc(var(--border-radius--xsmall) + .5rem);
  background-color: var(--_theme---s-bg); color: var(--_theme---s-text); cursor: default;
}
/* Corners (Omar, 15 Oct 13:0x: "Fix corner radius on bottom bar"): concentric. Every shape inside is the live pill's
   xsmall, the bar sits .5rem off them on every side, so its radius is xsmall + .5rem: 16 px on a desktop (the medium
   token), 12 px on a phone, where the site's tokens shrink (xsmall 4 px). */
.we-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Round 6 (Omar, 15 Oct 12:3x): headings in PP Editorial medium italic, white. The live shell loads only PP Editorial Old
   (200, 400, 700, roman and italic); there is no 500 file, so medium is requested the way the site's own .fancy.thinner
   requests it (weight token medium, 500) and the browser serves PPEditorialOld-Italic.woff2, the 400 italic. White in dark;
   in light the pop-up name sits on the light dock and panel, so they take the theme's text colour. */
.we-pop-name { font-family: var(--_typography---font-family--secondary); font-style: italic; font-weight: var(--_typography---font-weight--medium); }
html.u-theme-dark .we-pop-name { color: var(--_colors---primary--white); }
/* the PP Editorial rule (Omar, 15 Oct: "always medium italic"), page-wide: the shell's .fancy (the footer CTA word) asks for
   700; the site has no Medium file, so the 400 italic file renders, as in About v1 */
.fancy { font-weight: var(--_typography---font-weight--medium, 500); font-style: italic; }
.we-filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.we-filters::-webkit-scrollbar { display: none; }
.we-filters { gap: .375rem; }
.we-filters button { flex: none; border: 0; cursor: pointer; font-family: inherit; font-size: .8125rem; padding: .25rem .625rem; line-height: 1.5; }
.we-filters button.slctd { background-color: var(--_colors---primary--orange); color: #fff; cursor: default; }
/* the dock stays centred and keeps clear of Exit on both sides: works.js writes Exit's measured width into --we-exit-w */
.we-dock { max-width: calc(100% - 2 * (var(--we-exit-w, 5rem) + 2.25rem)); }

/* ---------- round 9: the way out and the way back ----------
   Omar, 16 Oct 00:2x: "like an "exit" button in the corners ... clearly visible but not inviting like a CTA". Furniture,
   not a call to action: the dock's own ground, its measured height (--we-dock-h, from works.js) and its concentric radius,
   the nav links' 14 px medium label, a Phosphor line arrow. No orange, no outline, no pill. Exit sits in the field's
   bottom right corner, its arrow pointing down; Back to the work is the same object, fixed in the top right corner once
   the field has been left (the navbar has scrolled away with the field), its arrow pointing up, one ground step darker
   so it still reads as an object on the page's plain ground. */
.we-exit, .we-back {
  position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 5; box-sizing: border-box; margin: 0;
  display: inline-flex; align-items: center; gap: .5rem; height: var(--we-dock-h, 2.8125rem); padding: 0 1rem 0 .875rem;
  border: 0; border-radius: calc(var(--border-radius--xsmall) + .5rem);
  background-color: var(--_theme---s-bg); color: var(--_theme---s-text);
  font-family: inherit; font-size: .875rem; font-weight: var(--_typography---font-weight--medium); line-height: 1; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .25s ease;
}
.we-exit svg, .we-back svg { width: 1rem; height: 1rem; flex: none; transition: translate .45s cubic-bezier(.16, 1, .3, 1); }
.we-exit.is-off { visibility: hidden; pointer-events: none; }
.we-back {
  position: fixed; top: 1.25rem; bottom: auto; z-index: 50; background-color: var(--_theme---s-bg-t2);
  opacity: 0; translate: 0 -.75rem; visibility: hidden; pointer-events: none;
  transition: background-color .25s ease, opacity .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .45s;
}
.we-back.is-on {
  opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto;
  transition: background-color .25s ease, opacity .45s cubic-bezier(.16, 1, .3, 1), translate .45s cubic-bezier(.16, 1, .3, 1), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  .we-exit:hover { background-color: var(--_theme---s-bg-t2); }
  .we-back:hover { background-color: var(--_theme---s-bg-t3); }
  .we-exit:hover svg { translate: 0 2px; }
  .we-back:hover svg { translate: 0 -2px; }
}
.we-exit:focus-visible, .we-back:focus-visible { outline: 2px solid var(--_colors---primary--orange); outline-offset: 2px; }

/* ---------- the tuner: top right under the theme toggle, opened and closed with the x key (round 8: no button) ---------- */
.we-opts { position: absolute; right: 1.25rem; top: 5.5rem; z-index: 6; cursor: default; }
.we-opts-panel {
  position: absolute; right: 0; top: calc(100% + .5rem); width: 21rem; max-height: calc(100svh - 10rem); overflow-y: auto;
  display: grid; gap: .25rem; padding: .75rem .875rem; scrollbar-width: thin;
  border-radius: var(--border-radius--large); background-color: var(--_theme---s-bg); color: var(--_theme---s-text); white-space: nowrap;
  font-size: .8125rem; line-height: 1.5;
}
.we-opts-panel[hidden] { display: none; }
/* Round 7 tuner: a tool for Omar behind the Options button, closed by default; one row per value, the value printed live */
.we-tune-h { margin: .5rem 0 0; opacity: .62; }
.we-tune-h:first-child { margin-top: 0; }
.we-tune-row { display: grid; grid-template-columns: 8rem minmax(0, 1fr) 4.25rem; align-items: center; gap: .5rem; min-height: 1.75rem; }
.we-tune-k { overflow: hidden; text-overflow: ellipsis; margin: 0; font-weight: inherit; font-size: inherit; line-height: inherit; display: block; }
.we-tune-v { text-align: right; font-variant-numeric: tabular-nums; }
.we-tune-row input[type="range"] { width: 100%; margin: 0; accent-color: var(--_colors---primary--orange); cursor: pointer; }
.we-tune-sw { grid-column: 2 / 4; justify-self: start; }
.we-tune-pres { grid-column: 2 / 4; display: flex; gap: .375rem; }
.we-opts-panel button { border: 0; cursor: pointer; font-family: inherit; font-size: .8125rem; }
.we-tune-sw[aria-pressed="true"] { background-color: var(--_colors---primary--orange); color: #fff; }
.we-tune-acts { display: flex; gap: .375rem; margin-top: .5rem; }
/* on a touch screen every row is a 44 px target, so a finger can take a slider without hitting the one above */
@media (pointer: coarse) { .we-tune-row { min-height: 2.75rem; } .we-tune-acts button { padding-block: .625rem; } }

/* ---------- the pop-up ---------- */
/* J-253 fault 7: 996, one under the site's cookie bar (998) and its preferences (997), both the page's own Finsweet layers in
   the same stacking context, and over everything else on the page (navbar 99, its logo 101). At 1000 the bar sat under the
   veil, and a click on Deny landed on the veil and closed the pop-up instead. */
.we-pop { position: fixed; inset: 0; z-index: 996; display: grid; place-items: center; padding: 2rem; }
.we-pop[hidden] { display: none; }
.we-pop-veil { position: absolute; inset: 0; background-color: rgb(11 15 15 / .72); }
/* J-241: a finger on the veil around an open pop-up pans nothing: neither the page behind nor the field (a tap still closes it) */
.we-pop-veil { touch-action: none; }
/* J-253 faults 6 and 9: the box holds the panel and, beside it, Close. It takes the panel's old width and is as tall as the
   panel; it neither scrolls nor clips, so Close stays whole at the panel's corner and stays put while the panel scrolls
   under it. The panel keeps its own height rule: the old 100 % of the pop-up's box, written as the screen less the pop-up's
   padding, so its grid is still sized from its content and a tall pop-up overflows at the bottom, where it scrolls (a
   flexed, definite height squeezed the window's row and pushed its top out of reach: 390 x 664, 59 px above the panel). */
.we-pop-box { position: relative; z-index: 1; width: min(80rem, 100%); }
.we-pop-panel {
  --we-bgo: 1;
  position: relative; z-index: 1; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 1fr); gap: 2rem; align-items: center;
  max-height: calc(100svh - 4rem); padding: 1.25rem 1.25rem 1.25rem 1.25rem; border-radius: var(--border-radius--xhuge);
  color: var(--_theme---s-text);
  /* J-241 (Omar, 17 Oct 2:43: "Popup scroll bug"): a pop-up taller than the window scrolls inside itself, by finger and by
     wheel (works.js marks the pop-up data-lenis-prevent, so the stopped Lenis no longer cancels those gestures), and the
     scroll never runs on into the page. The ground is the panel's own background, which stays put while the content
     scrolls (a ::before at inset 0 scrolled away with it and left the lower part of a scrolled panel with no ground); its
     opacity is still --we-bgo, which the opening animation runs from 0 to 1. Above the phone breakpoint the panel scrolls
     only once the window has grown into place (works.js adds .is-open), so the grow from the tile is never clipped. */
  overscroll-behavior: contain; touch-action: pan-y;
  background-color: color-mix(in srgb, var(--_theme---s-bg-t1) calc(var(--we-bgo) * 100%), transparent);
}
.we-pop-panel.is-open { overflow-y: auto; }
.we-win {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  border-radius: var(--border-radius--huge); overflow: hidden; background-color: var(--_theme---s-bg);
}
html.u-theme-dark .we-win { background-color: var(--_theme---s-bg-t3); }
.we-win-bar { display: flex; align-items: center; gap: .625rem; height: 3rem; padding: 0 .875rem 0 1.125rem; flex: none; }
.we-dot { width: .875rem; aspect-ratio: 1; border-radius: 50%; flex: none; }
.we-win-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 1rem; line-height: 1.2; font-weight: var(--_typography---font-weight--medium); }
.we-win-acts { margin-left: auto; display: flex; flex: none; }
.we-act {
  display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .625rem; border: 0; border-radius: var(--border-radius--xsmall);
  background: transparent; color: inherit; font: inherit; font-size: .875rem; line-height: 1.2; cursor: pointer;
}
.we-act:hover { background-color: var(--_theme---s-bg-t2); }
.we-act svg { width: .875rem; height: .875rem; }
.we-win-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--_theme---s-bg-t3); max-height: calc(100svh - 10rem); }
.we-slide {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1s cubic-bezier(.62, .05, .01, .99);
}
.we-slide.is-on { opacity: 1; z-index: 1; animation: weDrift 6s linear both; }
video.we-slide.is-on { animation: none; }
.we-slide--lot { display: flex; align-items: center; justify-content: center; }
.we-slide--lot lottie-player { width: 60%; height: 60%; }
@keyframes weDrift { from { transform: scale(1.02); } to { transform: scale(1.1); } }
.we-film { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; background: #000; }

.we-pop-text { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; padding: 1rem 1.5rem 1rem 0; min-width: 0; }
.we-pop-name {
  margin: 0;
  letter-spacing: -.03em; font-size: 3.5rem; line-height: 1; overflow-wrap: anywhere;
}
.we-pop-cats .work-list_category { background-color: var(--_theme---s-bg-t2); color: var(--_theme---s-text); font-size: .875rem; }
.we-pop-line { margin: 0; font-size: 1.125rem; line-height: 1.5; max-width: 34em; }
.we-pop-line[hidden] { display: none; }
.we-see { margin-top: .5rem; }
/* over the panel's corner, in the box (z 2 over the panel's 1); 44 px, the touch target */
.we-close {
  position: absolute; top: -1rem; right: -1rem; z-index: 2; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer; padding: 0;
  background-color: var(--_theme---s-bg); color: var(--_theme---s-text);
}
.we-close svg { width: 1rem; height: 1rem; }
.we-pop-panel:focus { outline: none; }
.we-close:focus-visible { outline: 2px solid var(--_colors---primary--orange); outline-offset: 2px; }

/* slop-ok: SLOP-27 - Webflow's tablet breakpoint, not a text measure */
@media (max-width: 991px) {
  .we-pop { padding: 1rem; align-items: end; }
  .we-pop-panel { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: .75rem; max-height: calc(100svh - 2rem); overflow-y: auto; }
  .we-pop-text { padding: .25rem .5rem .75rem; gap: .875rem; }
  .we-pop-name { font-size: 2.5rem; }
  .we-pop-line { font-size: 1rem; }
  /* inside the window's top right corner; in the box, so it stays there while the panel scrolls (390 x 664: y 36 to 80 at every scroll) */
  .we-close { top: 1.25rem; right: 1.25rem; }
  /* the window bar's actions end left of Close (its left edge is 3.25rem inside the window, plus .5rem): before, at 390 the X
     sat on "Watch film" and hid "film" */
  .we-win-bar { padding-right: 3.75rem; }
  .we-win-media { max-height: 50svh; }
}
/* slop-ok: SLOP-27 - Webflow's phone breakpoint, not a text measure */
@media (max-width: 767px) {
  .we-dock { left: .5rem; right: calc(1rem + var(--we-exit-w, 4.5rem)); bottom: .5rem; width: auto; max-width: none; margin: 0; gap: .625rem; padding: .5rem; }
  .we-exit, .we-back { right: .5rem; bottom: .5rem; padding: 0 .875rem 0 .75rem; }
  .we-back { top: .5rem; bottom: auto; }
  .we-opts-panel { width: calc(100vw - 1rem); max-height: calc(100svh - 12rem); }
  .we-filters button { padding: .375rem .625rem; }
  .we-opts { right: .5rem; }
  .we-cap { font-size: .875rem; padding-top: .5rem; }
  .we-cats { display: none; }
  .we-name { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .we-card, .we-img img, .we-slide, .we-back, .we-back.is-on, .we-exit svg, .we-back svg { transition: none; }
  .we-slide.is-on { animation: none; }
}