/* Stage (Lori): the meeting turned into next steps, on the green of Lori's own sidebar.
   Round 9 (final-jury-9/BUILD-R9.md): Lori gold #F9A01B only as the "now" marker (5.90 to 1 on the green): the
   timestamp being said, a to-do tick as it fills, the played part of the trace. No italic. Newsreader only at 28 px
   and up; everything else Manrope, 12 px and up. Never empty at rest.
   Inks on #123C2C: chalk #F5F2EC (11.0), rows and "by" #CBD0CC (7.86), earlier lines #A9BDB2, outlines and row times
   #9FB5AA (5.66). Motion: transform and opacity only, cubic-bezier(.16,1,.3,1). Finished without the script. */

/* ---------------------------------------------------------------- the shared stage */
.st-stage.st-lori {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  border-radius: 6px;
  background: var(--st-ground);
  color: var(--st-ink);
  overflow: hidden;
}
/* Lori's own colours, scoped to Lori's stage so the other stages on the page keep theirs. */
.st-stage.st-lori {
  --st-ground: #123C2C;                   /* the Lori sidebar, measured from the recording: rgb(18 60 44) */
  --st-ink: #F5F2EC;
  --st-soft: #CBD0CC;
  --st-past: #A9BDB2;
  --st-sage: #9FB5AA;
  --st-gold: #F9A01B;                     /* Lori's own gold: the "now" marker, nothing else */
  --st-hair: rgb(245 242 236 / .22);
  --st-ease: cubic-bezier(.16, 1, .3, 1);
}
.st-stage.st-lori > figure { position: relative; z-index: 1; }
.st-stage.st-lori > [aria-hidden="true"] { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.st-lori .st-mark {
  position: absolute;
  top: 28px;
  left: 32px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  white-space: nowrap;
}
.st-lori .st-mark-icon { display: block; width: 28px !important; height: 28px !important; max-width: none; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.st-lori .st-mark-name { font: 600 18px/1 Manrope, Arial, sans-serif !important; letter-spacing: -.01em; }
/* One "by SOLVA" on every stage: lowercase "by", Manrope 500 12 px, #CBD0CC on the dark grounds. */
.st-lori .st-mark-by {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 2px;
  font: 500 12px/1 Manrope, Arial, sans-serif !important;
  color: var(--st-soft) !important;
}
.st-lori .st-mark-by img { display: block; width: auto !important; height: 9px !important; max-width: none; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
/* Page rules recolour paragraphs and spans (body.sys-n ... section p); Lori's mark keeps its ink. */
.st-stage.st-lori .st-mark, .st-stage.st-lori .st-mark-name { color: var(--st-ink) !important; }

/* ---------------------------------------------------------------- Lori: the frame on the green */
/* The caption and the chapter strip keep their markup and behaviour; only their ink changes for the ground.
   The caption's "Lori by SOLVA" now lives in the mark, so the caption keeps it for screen readers only. */
.st-lori .co-strip {
  --co-ink: #F5F2EC;
  --co-mid: rgb(245 242 236 / .74);
  --co-line: rgb(245 242 236 / .24);
  background: none !important;
  box-shadow: none !important;
}
.st-lori figure > figcaption { background: none !important; box-shadow: none !important; }
.st-lori figure > figcaption,
.st-lori figure > figcaption :is(span, a, button) { color: rgb(245 242 236 / .78) !important; }
.st-lori figure > figcaption .cm-inspect { border-color: rgb(245 242 236 / .3) !important; background: none !important; }
.st-lori figure > figcaption .p9-credit {
  position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
/* The recording sits on the green as a window: no pale outline, border or backing anywhere around it (Mark, 14 Oct:
   "get rid of this white line"). The generic cream-page frame (an outline in rgba(199,203,195,.9) on .cm-stage, a
   cream backing and a light border on the Lori page's link) is taken off. On the desktop recording the outermost box
   that clips it carries the edge instead: a 1 px ring in a darker tone of the green, so the recording's own green
   sidebar still has an edge against the stage, and a deep soft shadow tuned for the green. Radius 8 px, the
   window's own corners. The phone recordings keep their own dark device frames. */
.st-stage.st-lori figure :is(.cm-stage, .np-screen-open, .ni-screen-image, .lx-panel-window, .lx-device) { outline: 0 !important; }
/* cinematic-journey's light sweep draws a 1 px pale line along the top edge of every recording: not on the green. */
.st-stage.st-lori .cj-stage-light { display: none !important; }
.st-stage.st-lori figure .np-screen-open { background: transparent !important; border: 0 !important; box-shadow: none !important; }
@media (max-width: 700px) { .st-stage.st-lori figure .np-screen-open { overflow: visible !important; } }
@media (min-width: 701px) {
  .st-lori .cm-stage { box-shadow: none !important; border-radius: 8px !important; }
  .st-lori .lx-device { background: transparent !important; padding: 0 !important; box-shadow: none !important; border-radius: 8px !important; }
  .st-stage.st-lori figure :is(.lx-panel-window, .np-screen-open, .ni-screen-image) {
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    overflow: hidden !important;
    box-shadow: 0 0 0 1px #0A2619, 0 30px 60px -30px rgb(0 0 0 / .55), 0 12px 24px -16px rgb(0 0 0 / .35) !important;
  }
}

/* ---------------------------------------------------------------- Lori: the transcript */
/* The transcript above, the rows below; the transcript takes whatever height the rows leave. */
.st-lori .st-lori-aside { position: absolute; display: flex; flex-direction: column; }
.st-lori .st-lori-talk { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
/* Earlier lines leave through the top edge into the ground. */
.st-lori .st-lori-frame { position: absolute; left: 0; right: 0; bottom: 0; }
.st-lori .st-lori-prev { display: none; }
.st-stage.st-lori .st-lori-frame > .st-lori-now:last-child { margin-bottom: 0 !important; }
.st-stage.st-lori .st-lori-prev {
  margin: 12px 0 0 !important;
  padding: 0 !important;
  font: 500 15px/1.45 Manrope, Arial, sans-serif !important;
  color: var(--st-past) !important;
  overflow-wrap: normal;
}
.st-stage.st-lori .st-lori-now {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font: 600 18px/24px Manrope, Arial, sans-serif !important;
  letter-spacing: -.005em;
  color: var(--st-ink) !important;
  overflow-wrap: normal;
}
.st-stage.st-lori .st-lori-at {
  display: block;
  margin: 8px 0 0;
  font: 600 12px/1 Manrope, Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--st-gold) !important;
}

/* ---------------------------------------------------------------- Lori: Decisions and To-do */
.st-lori .st-lori-notes { position: relative; flex: none; display: none; margin-top: 40px; transition: transform .4s var(--st-ease); }
.st-stage.st-lori .st-lori-head {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 !important;
  padding: 0 0 10px !important;
  font: 600 13px/1.2 Manrope, Arial, sans-serif !important;
  letter-spacing: .01em;
  color: var(--st-ink) !important;
}
.st-lori .st-lori-head + ol + .st-lori-head { margin-top: 22px !important; }
.st-lori .st-lori-head > span { font: 600 12px/1 Manrope, Arial, sans-serif !important; color: var(--st-sage); }
.st-lori .st-lori-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--st-hair);
  transform-origin: 0 50%;
}
.st-lori .st-lori-notes ol { list-style: none; margin: 0 !important; padding: 0 !important; }
.st-stage.st-lori .st-lori-notes li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  margin: 0 !important;
  padding: 12px 0 0 !important;
  font: 500 14px/1.45 Manrope, Arial, sans-serif !important;
  color: var(--st-soft) !important;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .45s var(--st-ease), transform .45s var(--st-ease);
}
.st-stage.st-lori .st-lori-notes ol:last-child li { grid-template-columns: 24px minmax(0, 1fr); }
.st-stage.st-lori .st-lori-notes li.st-lori-in { opacity: 1; transform: none; }
.st-stage.st-lori .st-lori-row-at {
  font: 600 12px/20px Manrope, Arial, sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--st-sage);
  white-space: nowrap;
}
.st-stage.st-lori .st-lori-row-text .st-lori-row-at { margin-left: 4px; line-height: 1; }
.st-lori .st-lori-box {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  box-sizing: border-box;
  border: 1px solid var(--st-sage);
  border-radius: 3px;
}
.st-lori .st-lori-fill, .st-lori .st-lori-gold { position: absolute; inset: -1px; border-radius: 3px; transform: scale(0); }
.st-lori .st-lori-fill { background: var(--st-ink); transition: transform .3s var(--st-ease); }
.st-lori .st-lori-check { position: absolute; inset: 0; width: 12px; height: 12px; }
.st-lori .st-lori-check path { fill: none; stroke: var(--st-ground); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.st-lori .st-lori-gold { background: var(--st-gold); opacity: 0; transition: transform .3s var(--st-ease), opacity .6s var(--st-ease); }
.st-lori li.st-lori-filling .st-lori-fill, .st-lori li.st-lori-done .st-lori-fill { transform: none; }
.st-lori li.st-lori-filling .st-lori-gold { transform: none; opacity: 1; }

/* The rule from the gold timestamp to its row: 1 px, drawn by the script with transforms only. */
.st-lori .st-lori-rule {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  background: var(--st-sage);
  transform-origin: 0 0;
  opacity: 0;
}

/* ---------------------------------------------------------------- Lori: the trace */
.st-lori .st-lori-wave { position: absolute; height: 25px; }
.st-lori .st-lori-trace { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.st-lori .st-lori-trace path { fill: none; stroke: rgb(245 242 236 / .4); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.st-lori .st-lori-trace-gold path { stroke: var(--st-gold); }
/* The played part: an outer box slid left and its contents slid back, so only transforms change. */
.st-lori .st-lori-played { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateX(-100%); transition: opacity .6s var(--st-ease); }
.st-lori .st-lori-played-in { position: absolute; inset: 0; transform: translateX(100%); }
.st-lori.st-lori-playing .st-lori-played { opacity: 1; }

/* ---------------------------------------------------------------- compact (phone, the Our work card, tablets) */
/* The mark, the line being said with the one before it, the screen, the trace. The rows stay in the screen. */
.st-lori { padding: 180px 28px 68px; }
.st-lori .st-mark { left: 28px; }
.st-lori .st-lori-aside { top: 80px; left: 28px; right: 28px; height: 68px; }
.st-lori .st-lori-prev-2 { display: none; }
.st-lori .st-lori-wave { left: 28px; right: 28px; bottom: 24px; }
/* The Our work card: everything on the screen's own edges. */
.st-lori-card { padding-inline: 48px; }
.st-lori-card .st-mark { left: 48px; }
.st-lori-card .st-lori-aside, .st-lori-card .st-lori-wave { left: 48px; right: 48px; }
@media (max-width: 700px) {
  .st-stage.st-lori { container-type: inline-size; padding: 172px 20px 60px; }
  .st-lori .st-mark, .st-lori-card .st-mark { top: 20px; left: 20px; }
  .st-lori .st-lori-aside, .st-lori-card .st-lori-aside { top: 72px; left: 20px; right: 20px; height: 68px; }
  .st-lori .st-lori-wave, .st-lori-card .st-lori-wave { left: 20px; right: 20px; bottom: 20px; }

  /* The chapter strip on one row: the full width of the stage, 14 px, no word broken; it scrolls sideways under a
     fade when the four names do not fit, and the script keeps the current one in view. */
  .st-lori .co-strip { width: calc(100cqw - 40px) !important; margin-left: calc((100% - 100cqw + 40px) / 2) !important; }
  .st-lori .co-marks {
    display: flex !important;
    gap: 22px !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
  .st-lori .co-marks::-webkit-scrollbar { display: none; }
  .st-lori .co-marks button { flex: none; padding: 11px 0 8px !important; font-size: 14px !important; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  .st-lori .co-marks button:last-child { padding-right: 28px !important; }
  .st-lori .co-tick { display: none; }
  .st-lori .co-label { padding-left: 0 !important; }
}

@media (max-width: 340px) {
  .st-stage.st-lori { padding-top: 196px; }
  .st-lori .st-lori-aside, .st-lori-card .st-lori-aside { height: 92px; }
}

/* ---------------------------------------------------------------- wide: the home section and the Lori page */
@media (min-width: 1100px) {
  /* The text that sat beside the screen moves above the stage, so the stage can take the whole column. */
  #lx-lights .lx-lori-bottom.st-lori-bottom { display: block !important; }
  #lx-lights .lx-lori-bottom.st-lori-bottom > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 560px) auto;
    justify-content: space-between;
    align-items: end;
    column-gap: 64px;
    margin-bottom: 48px;
  }
  #lx-lights .lx-lori-bottom.st-lori-bottom > div:first-child > .lx-copy { grid-column: 1; grid-row: 1 / 3; margin: 0 !important; }
  #lx-lights .lx-lori-bottom.st-lori-bottom > div:first-child > .lx-status { grid-column: 2; grid-row: 1; margin: 0 0 6px !important; text-align: right; }
  #lx-lights .lx-lori-bottom.st-lori-bottom > div:first-child > .lx-link { grid-column: 2; grid-row: 2; justify-self: end; margin: 0 !important; }
  body .np-proof.st-lori-proof { display: block !important; }
  body .np-proof.st-lori-proof > .np-copy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    column-gap: 64px;
    align-items: end;
    max-width: none !important;
    margin-bottom: 48px;
  }
  body .np-proof.st-lori-proof > .np-copy > * { margin: 0 !important; }

  /* min-height: the rows and at least three lines of transcript always fit beside a shorter screen (1280 x 720). */
  .st-lori-home, .st-lori-page { --st-aside: clamp(384px, 31vw, 440px); min-height: 720px; padding: 82px 80px 96px var(--st-aside) !important; }
  .st-lori-home > figure, .st-lori-page > figure { width: 100% !important; max-width: none !important; margin: 0 !important; }
  .st-lori-home .st-mark, .st-lori-page .st-mark { top: 30px; left: 40px; }
  .st-lori-home .st-lori-aside, .st-lori-page .st-lori-aside { top: 82px; bottom: 96px; left: 40px; right: auto; width: calc(var(--st-aside) - 104px); height: auto; }
  .st-lori-home :is(.st-lori-prev-1, .st-lori-prev-2), .st-lori-page :is(.st-lori-prev-1, .st-lori-prev-2) { display: block; }
  .st-lori-home .st-lori-frame, .st-lori-page .st-lori-frame { top: 0; bottom: auto; }
  .st-lori-home .st-lori-talk, .st-lori-page .st-lori-talk { flex: none; height: 236px; }
  /* The line being said: Newsreader at 28 px, the only size it is used at on the stage. */
  .st-stage.st-lori-home .st-lori-now, .st-stage.st-lori-page .st-lori-now { font: 400 28px/1.18 Newsreader, Georgia, serif !important; letter-spacing: -.01em; }
  /* Cap: three lines of the serif at the narrowest wide column (1100 px); the script measures and never cuts. */
  .st-stage.st-lori-home .st-lori-said, .st-stage.st-lori-page .st-lori-said { display: block; max-height: calc(3 * 1.18em); overflow: hidden; }
  .st-lori-home .st-lori-notes, .st-lori-page .st-lori-notes { display: block; }
  .st-lori-home .st-lori-wave, .st-lori-page .st-lori-wave { left: 40px; right: 40px; bottom: 36px; }
}

/* ---------------------------------------------------------------- the draw-in, once, as the stage enters */
/* Round 10: nothing that carries words is hidden for an entrance, so the first paint is never a plain green block.
   Only the trace draws itself in, once, as the stage enters. */
.st-lori.st-lori-pre .st-lori-wave { clip-path: inset(0 100% 0 0); }
.st-lori.st-lori-drawing .st-lori-wave { transition: clip-path 1.4s var(--st-ease); }

@media (prefers-reduced-motion: reduce) {
  .st-lori *, .st-lori { transition: none !important; animation: none !important; }
}