/* slop-ok: SLOP-16, SLOP-25, SLOP-18 - iklipseworld.com's own type scale, leading and Webflow rem spacing (live tokens, read from the staging stylesheet 16 Oct), not the house ladder */
/* slop-ok: SLOP-27 - 991 and 767 are the live site's breakpoints, not measures; the body's measure is its column, 5 of 12 */
/* slop-ok: SLOP-07 - radii are the live site's own tokens: --border-radius--huge on the orange block, --border-radius--medium on the photographs inside it, round buttons as on the site's dock */
/* slop-ok: SLOP-24 - the one caps word is the LITE stamp, set in Excon caps by the brief */
/* iklipse LITE, the section (J-249, 16 Oct). Before the CTA on Home, About and Works. Left, five of twelve columns: the
   title (the orange "iklipse" word of the live CTA, then the LITE stamp), the line in PP Editorial italic 500, the body.
   Right, seven columns: a flat block of the iklipse orange (R11, Harper's block beside a photograph) holding a deck of
   the Lite projects' own thumbnails, each wearing the quiet LITE chip (round 2, no frame); the front card turns every 3.4 s, the next two
   wait behind it. Under the block: the project's name, its category, the count and the controls, then the fine print.
   Grounds and text take the page's theme tokens, so the section follows Lights On and Lights Off. Everything that
   moves writes transform and opacity only. */
.ik-lite {
  --ik-o: var(--_colors---brand-colors--iklipse-orange, #f95338);
  --ik-tx: var(--_theme---s-text, #fff);
  --ik-t2: var(--_theme---s-text-t2, #f2eeed);
  --ik-g: var(--spacer--custom-1, 1.25rem);
  position: relative; display: block; overflow-x: clip;
  padding: var(--section--large, 8rem) var(--global, 3rem) var(--section--medium, 7rem);
  color: var(--ik-tx);
  font-family: var(--_typography---font-family--primary, Excon), Arial, sans-serif;
}
.ik-lite :where(h2, p) { margin: 0; padding: 0; }
.ik-lite_g {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ik-g);
  max-width: 120rem; margin: 0 auto; align-items: start;
}
.ik-lite_text { grid-column: 1 / span 5; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; gap: 2rem; min-width: 0; }
/* the title at the top of the block, the body on the line the controls stand on */
.ik-lite_body { margin-top: auto; }
.ik-lite_show { grid-column: 6 / span 7; grid-row: 1; min-width: 0; }
.ik-lite_fine { grid-column: 6 / span 7; grid-row: 2; }

.ik-lite_h {
  font-family: var(--_typography---font-family--primary, Excon), Arial, sans-serif; font-size: var(--_typography---h2--font-size, 4.5rem); line-height: 1.1; letter-spacing: -.02em;
  font-weight: var(--_typography---font-weight--semibold, 600); color: var(--ik-tx);
}
/* the live CTA's "iklipse" word (.iklipse-word): orange, Excon 900, -.05em */
.ik-lite_w { color: var(--ik-o); font-weight: 900; letter-spacing: -.05em; }
.ik-lite_h .ik-lite-stamp { margin-left: .14em; border-radius: .18em; }
.ik-lite_line {
  font-family: var(--_typography---font-family--secondary, Ppeditorialold), "Times New Roman", serif;
  font-style: italic; font-weight: 500; letter-spacing: -.03em;
  font-size: var(--_typography---h4--font-size, 3rem); line-height: 1.05; color: var(--ik-tx); text-wrap: balance; max-width: 11em;
}
.ik-lite_body { font-size: 1.25rem; line-height: 1.45; color: var(--ik-t2); max-width: 30em; }

/* ---------- the block and the deck ---------- */
.ik-lite_block {
  position: relative; background-color: var(--ik-o); border-radius: var(--border-radius--huge, 1.75rem);
  padding: clamp(1rem, 2.6vw, 3rem); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ik-lite_stage { position: relative; aspect-ratio: 16 / 10; }
.ik-lite .ik-lite_card {
  --ik-lite-r: var(--border-radius--medium, 1rem);
  --ik-lite-R: var(--ik-lite-r);
  position: absolute; left: 0; top: 0; width: 84%; height: 100%; display: block; overflow: hidden;
  border-radius: var(--ik-lite-r); background-color: #101414; color: #fff; text-decoration: none;
  transform-origin: 100% 50%; will-change: transform, opacity;
  transition: transform .95s cubic-bezier(.16, 1, .3, 1), opacity .7s cubic-bezier(.16, 1, .3, 1);
  opacity: 0; transform: translate3d(19%, 0, 0) scale(.78); z-index: 1; pointer-events: none;
}
.ik-lite_card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; }
/* the deck behind is tinted toward the block so the front card owns the image (R12) */
.ik-lite_card::before { content: ""; position: absolute; inset: 0; z-index: 2; background-color: var(--ik-o); opacity: 0;
  transition: opacity .95s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.ik-lite_card[data-pos="0"] { opacity: 1; transform: none; z-index: 5; pointer-events: auto; }
.ik-lite_card[data-pos="1"] { opacity: 1; transform: translate3d(9.5%, 0, 0) scale(.9); z-index: 4; pointer-events: auto; cursor: pointer; }
.ik-lite_card[data-pos="2"] { opacity: 1; transform: translate3d(19%, 0, 0) scale(.8); z-index: 3; }
.ik-lite_card[data-pos="1"]::before { opacity: .38; }
.ik-lite_card[data-pos="2"]::before { opacity: .62; }
.ik-lite_card[data-pos="-1"] { opacity: 0; transform: translate3d(-36%, 0, 0) scale(.96); z-index: 6; }
.ik-lite_card[data-pos="0"] img { animation: ikLiteDrift 5s linear both; }
@keyframes ikLiteDrift { from { transform: scale(1.0); } to { transform: scale(1.07); } }
.ik-lite_block.is-drag .ik-lite_card { transition: none; }
.ik-lite_card:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- under the block ---------- */
.ik-lite_bar { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; min-width: 0; }
.ik-lite_cap { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.ik-lite_name {
  font-family: var(--_typography---font-family--secondary, Ppeditorialold), "Times New Roman", serif;
  font-style: italic; font-weight: 500; letter-spacing: -.03em; font-size: 2rem; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ik-tx);
}
.ik-lite_cat { font-size: 1rem; line-height: 1.3; color: var(--ik-t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ik-lite_cap.is-in > * { animation: ikLiteRise .7s cubic-bezier(.16, 1, .3, 1) both; }
.ik-lite_cap.is-in > :nth-child(2) { animation-delay: .06s; }
@keyframes ikLiteRise { from { transform: translateY(.6em); opacity: 0; } to { transform: none; opacity: 1; } }
.ik-lite_n { flex: none; font-size: 1rem; line-height: 1; color: var(--ik-t2); font-variant-numeric: tabular-nums; margin-right: .25rem; }
.ik-lite_btn {
  flex: none; display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem; padding: 0; border: 0; border-radius: 50%;
  background-color: var(--ik-o); color: #fff; cursor: pointer; transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}
.ik-lite_btn svg { width: 1.375rem; height: 1.375rem; display: block; }
.ik-lite_btn[data-act="prev"] svg { transform: scaleX(-1); }
.ik-lite_btn:focus-visible { outline: 3px solid var(--ik-tx); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ik-lite_btn:hover { transform: scale(1.08); } }
.ik-lite_fine { margin-top: 1.5rem; font-size: .875rem; line-height: 1.5; color: var(--ik-t2); max-width: 46em; }

/* ---------- tablet and phone ---------- */
@media screen and (max-width: 991px) {
  /* one column, and the slideshow comes up right under the line, before the body: the picture first on a phone */
  .ik-lite_text { display: contents; }
  .ik-lite_g > *, .ik-lite_text > * { grid-column: 1 / -1; grid-row: auto; }
  .ik-lite_h { order: 1; margin-bottom: 1.25rem; }
  .ik-lite_line { order: 2; margin-bottom: 2.5rem; }
  .ik-lite_show { order: 3; }
  .ik-lite_body { order: 4; margin-top: 2.5rem; }
  .ik-lite_fine { order: 5; }
}
@media screen and (max-width: 767px) {
  .ik-lite_line { margin-bottom: 2rem; }
  .ik-lite_body { margin-top: 2rem; }
  .ik-lite_body { font-size: 1.125rem; }
  .ik-lite_name { font-size: 1.625rem; }
  .ik-lite_bar { gap: .625rem; margin-top: 1rem; flex-wrap: wrap; }
  .ik-lite_cap { flex-basis: 100%; }
  .ik-lite_n { margin-right: auto; }
  .ik-lite_btn { width: 3.5rem; height: 3.5rem; }
  .ik-lite .ik-lite_card { width: 82%; }
}

@media (prefers-reduced-motion: reduce) {
  .ik-lite .ik-lite_card, .ik-lite .ik-lite_card::before, .ik-lite_btn { transition: none; }
  .ik-lite_card[data-pos="0"] img, .ik-lite_cap.is-in > * { animation: none; }
}