/* Works E, round 10: the arrival card (Omar, 16 Oct 02:0x: "It should be a card with a blurred glass like background over
   the projects."). help.js builds it and runs it; this file draws it. No veil: the field is at rest and full strength around
   and behind one compact card of frosted glass. The glass is the live site's own (iklipseworld.com .brands-v3_logo-wrap-
   modified: a white--10 hairline, a backdrop blur, a dark translucent ground), made heavier so the tiles behind read as
   colour and light, never as detail. Every colour, size, radius and gutter is a live iklipse token. */
/* slop-ok: SLOP-16 - the type ladder is iklipseworld.com's own (h5 token for the line, body 16), read from the live tokens */
/* slop-ok: SLOP-25 - leading as the live site sets it (110 % headings, 150 % body), so the card matches the nav and the pop-up */
/* slop-ok: SLOP-18 - spacing is the live site's rem steps (.75, 1, 1.5, 2, 2.5) and its --global gutter */
/* slop-ok: SLOP-07 - radii are live tokens: huge on the card (the tiles' own), the site's .button on Get started, xsmall on the bar's help square */
/* slop-ok: SLOP-06 - one hairline, the edge of the glass, as the live site draws its glass */
/* slop-ok: SLOP-22 - 34rem is the card's measure: two legend columns of the longest control phrase at 16 px with their glyphs, the line on two lines at 40 px */
/* slop-ok: SLOP-27 - 991 and 767 are Webflow's tablet and phone breakpoints, the live site's own, not text measures */
/* slop-ok: SLOP-10 - the icons are the gestures themselves (Phosphor 2.1.1, MIT), one per control, at text size beside the name */

/* The catcher: the first screen, transparent, under the nav (z 99) and over the field. It draws nothing; it holds the card
   in one of two places and takes the gestures meant for the held field (help.js). */
.wh {
  position: fixed; inset: 0; z-index: 5; box-sizing: border-box; display: grid;
  padding: 5.5rem var(--global, 3rem); color: var(--_theme---s-text);
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: default;
}
.wh[hidden] { display: none; }
/* ?help=1, the default: in the middle of the screen */
.wh[data-place="c"] { place-items: center; }
/* ?help=2: the lower left, the gutter in from the edge, its foot one bar's height and two insets above the bottom, so the
   bar arrives under it, not behind it (help.js writes the bar's measured height into --wh-dock-h) */
.wh[data-place="l"] { align-items: end; justify-items: start; padding-bottom: calc(2.5rem + var(--wh-dock-h, 2.8125rem)); }

/* the glass: the theme's raised ground at --wh-tint over the field blurred by --wh-blur (the tuner's values, 66 % and 40 px
   by default); help.js eases --wh-k from 0 to 1 as the card comes and back as it goes, so the frost forms and lets go with it */
.wh-card {
  --wh-k: 1;
  position: relative; box-sizing: border-box; width: min(34rem, 100%); max-height: 100%; overflow: hidden auto;
  padding: 2.5rem; border-radius: var(--border-radius--huge);
  border: 1px solid color-mix(in srgb, var(--_theme---s-text) 10%, transparent);
  background-color: var(--_theme---s-bg-t1);
  background-color: color-mix(in srgb, var(--_theme---s-bg-t1) var(--wh-tint, 66%), transparent);
  /* slop-ok: SLOP-08, 12 - the blur is the glass, not depth for hierarchy: Omar asked for it verbatim ("a card with a blurred glass like background over the projects"); behind it are the projects, which the reader sees as colour and light */
  -webkit-backdrop-filter: blur(calc(var(--wh-blur, 40px) * var(--wh-k))) saturate(calc(1 + .5 * var(--wh-k)));
  /* slop-ok: SLOP-08, 12 - the same glass, unprefixed */
  backdrop-filter: blur(calc(var(--wh-blur, 40px) * var(--wh-k))) saturate(calc(1 + .5 * var(--wh-k)));
  transform-origin: 50% 50%; overscroll-behavior: contain; scrollbar-width: none;
}
.wh-card::-webkit-scrollbar { display: none; }
/* where the browser has no backdrop filter, the ground carries the text alone */
/* slop-ok: SLOP-08, 12 - the feature test for the glass above, which this rule replaces with a near-opaque ground */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wh-card { background-color: color-mix(in srgb, var(--_theme---s-bg-t1) 94%, transparent); }
}
/* until the field has painted, the card is not drawn (help.js lifts it in) */
.wh.is-pre .wh-card { opacity: 0; visibility: hidden; }
/* only a card whose words overflow a short screen lets a finger scroll them */
.wh.can-scroll .wh-card { touch-action: pan-y; }

/* the quieter text is the theme text at 88 %: over a flat white field under the default glass it holds 5.3:1, and 4.65:1
   at the tuner's floor of 62 % (check_r10_help.mjs measures it over white on every run) */
/* the line: Excon medium on the h5 token, the starred word in PP Editorial Old italic 500 (Omar, 15 Oct: "always medium
   italic"; the site has no 500 file, so the 400 italic renders, as on the live CTA) */
/* The line breaks at its phrases, never inside one: the italic phrase and any hyphenated word are held whole, and the wrap is
   the plain greedy one, so a line that does not fit puts the italic phrase on a line of its own. Balance split the deck's
   routes mid-phrase at 1920 (“Ridiculously good-” / “looking, ...”, “You’d never read” / “this without the blur.”). */
.wh-title {
  margin: 0; font-family: var(--_typography---font-family--primary); font-size: var(--_typography---h5--font-size);
  line-height: 1.1; letter-spacing: -.02em; font-weight: var(--_typography---font-weight--medium); text-wrap: wrap;
}
.wh-fancy {
  font-family: var(--_typography---font-family--secondary); font-style: italic;
  font-weight: var(--_typography---font-weight--medium); letter-spacing: -.03em;
}
.wh-title .wh-fancy, .wh-nb { white-space: nowrap; }
.wh-line {
  margin: 1rem 0 0; font-size: 1rem; line-height: 1.5; text-wrap: pretty;
  color: color-mix(in srgb, var(--_theme---s-text) 88%, transparent);
}

/* the controls: two columns, three rows, the gesture's glyph at text size before the phrase */
.wh-keys {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem;
}
.wh-key { display: flex; align-items: center; gap: .75rem; margin: 0; min-width: 0; font-size: 1rem; line-height: 1.4; }
/* the Copywriter's phrase at 88 %, its gesture or key in bold at full strength (the deck: "Bold the words in bold") */
.wh-key-t { color: color-mix(in srgb, var(--_theme---s-text) 88%, transparent); }
.wh-key-t b { color: var(--_theme---s-text); font-weight: var(--_typography---font-weight--medium); }
.wh-ico { width: 1.25rem; height: 1.25rem; flex: none; }

/* Get started: the site's own .button (orange, white, radius 1rem, red on hover) in the site's .button_component, so the
   tag beside it is the site's .button_hover; the arrow leans on hover */
.wh-go-wrap { margin-top: 2.5rem; width: fit-content; }
/* slop-ok: SLOP-35 - font-family: inherit, so the button carries the site's own declared stack (Excon, Arial, sans-serif) */
.wh-go { display: inline-flex; align-items: center; gap: .625rem; border: 0; cursor: pointer; font-family: inherit; }
/* "Let’s go!" (the deck's hover word): the site's .button_hover tag (light ground, black 12 px semibold, the orange emblem,
   at the button's top right) with the site's own interaction copied from its Webflow export: in, scale 0 to 1 on swingTo
   and rotate -10 to 0 deg on outCubic, both 500 ms; out, scale to 0 on swingFrom in 350 ms. The site runs it at its main
   breakpoint only (992 px and up) and with a mouse; so does this. */
.wh .wh-go-tag { display: flex; scale: 0; rotate: -10deg; transition: scale .35s cubic-bezier(.6, -.28, .735, .045), rotate .5s cubic-bezier(.215, .61, .355, 1); }
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .wh .wh-go-wrap:hover .wh-go-tag { scale: 1; rotate: 0deg; transition: scale .5s cubic-bezier(.175, .885, .32, 1.275), rotate .5s cubic-bezier(.215, .61, .355, 1); }
}
.wh-go svg { width: 1.125rem; height: 1.125rem; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
/* the press answers on the frame of the click; scale, not transform, so the card's own tween never cancels it */
.wh-go { transition: background-color .2s cubic-bezier(.77, 0, .175, 1), scale .12s cubic-bezier(.16, 1, .3, 1); }
.wh-go:active { scale: .97; }
.wh-go:focus-visible { outline: 2px solid var(--_theme---s-text); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .wh-go:hover svg { transform: translateX(.25rem); } }

/* Before works.js fills the page's main (it runs last, after the shell's scripts), main is empty and the footer's CTA was
   the first thing painted, for about half a second at the top of the screen (the round 10 recording, 1920). The field's
   screen is held in its own ground until then, so the first paint is the field's place, not the footer. */
main[data-works-root]:empty { min-height: 100vh; min-height: 100svh; background-color: var(--_theme---s-bg-t1); }

/* While the card is up, the bar and Exit are away (help.js fades them in after Get started and out again on ?). The grid's
   own Exit (.wg-exit) lives outside the stage and is not touched. */
main[data-help="arriving"] .we-stage > .we-dock, main[data-help="arriving"] .we-stage > .we-exit,
main[data-help="open"] .we-stage > .we-dock, main[data-help="open"] .we-stage > .we-exit { opacity: 0; visibility: hidden; }
/* The field's opening deal (works.css .we.is-intro: tiles rising 40 px from 94 %) is held while the card arrives, so the
   projects are at rest under the glass from the first frame. With the card skipped, the deal plays as before. */
main.we.is-intro[data-help="arriving"] .we-card { opacity: 1; transform: none; }

/* the way back to the card, in the bar beside the filters: a square the height of a pill, in the pill's radius and ground.
   The pill is 14 px type on 150 % with .25rem above and below (the site's .work-list_category.clickable), 29 px; .375rem on a
   phone (works.css), 33 px. aspect-ratio does not resolve against a stretched height in this row, so the width is that sum. */
.wh-q {
  flex: none; align-self: stretch; width: calc(.875rem * 1.5 + .5rem); height: auto; display: grid; place-items: center; border: 0;
  border-radius: var(--border-radius--xsmall); cursor: pointer; padding: 0;
  background-color: var(--_theme---s-bg-t2); color: inherit;
}
.wh-q[hidden] { display: none; }
.wh-q svg { width: 1rem; height: 1rem; }
.wh-q:focus-visible { outline: 2px solid var(--_colors---primary--orange); outline-offset: 2px; }

/* the tuner's Arrival group sits in works.js's panel and borrows its row classes */
.wh-tune { display: contents; }
.wh-tune-opts { grid-column: 2 / 4; display: flex; gap: .375rem; flex-wrap: wrap; }
.wh-tune-acts { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .25rem; }

/* slop-ok: SLOP-27 - Webflow's tablet breakpoint; the tokens shrink here (h5 2rem, huge radius .875rem, --global 2.25rem) */
@media (max-width: 991px) {
  .wh-card { padding: 2rem; }
  .wh-keys { margin-top: 1.75rem; }
  .wh-go-wrap { margin-top: 2rem; }
}
/* slop-ok: SLOP-27 - Webflow's phone breakpoint: the card takes the width less the site's gutter (--global 1.5rem) */
@media (max-width: 767px) {
  .wh { padding: 4.75rem var(--global, 1.5rem) 1.5rem; }
  .wh[data-place="l"] { padding-bottom: calc(1.25rem + var(--wh-dock-h, 2.8125rem)); }
  .wh-card { padding: 1.5rem; }
  .wh-line { margin-top: .75rem; }
  /* one column: in two, four of the six phrases broke and left one word on a line of its own (390, 16 Oct) */
  .wh-keys { margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .wh-go-wrap { margin-top: 1.75rem; }
}
/* a short laptop or a phone on its side: the same card, closer together */
@media (max-height: 700px) and (min-width: 768px) {
  .wh { padding-top: 5rem; padding-bottom: 1.5rem; }
  .wh-card { padding: 2rem; }
  .wh-keys { margin-top: 1.5rem; }
  .wh-go-wrap { margin-top: 1.75rem; }
}
/* reduced motion: the tag appears and goes without the pop */
@media (prefers-reduced-motion: reduce) {
  .wh-go, .wh-go svg, .wh .wh-go-tag, .wh .wh-go-wrap:hover .wh-go-tag { transition: none; }
}