/* ==========================================================================
   The Living Manifesto — Agency page, between Vision & Mission and How We Work
   (ships to WordPress as assets/css/manifesto.css; markup from
   tools/sections/agency-page.mjs, content from content/pages/agency.json).
   The standalone review pages in experiments/ use the same file.
   An editorial poster of four ideas. One orange element only: the full stop,
   "the idea", which travels between the words. Heavy / thin pairing echoes
   CONCEPT / MEDIA. Each word reserves negative space in its own row, where its
   statement appears when it is selected.
   Uses the site tokens and fonts; nothing here touches approved sections.
   ========================================================================== */

/* On the Agency page it follows the white Mission plate and hands over to How We
   Work, also black: a hairline marks that change of scene, as the page does
   between Our Story and Vision. */
.ag-manifesto { border-block-end: var(--border-hair); }
/* Below 900px the stage's own bottom padding stacked on top of the Back button's
   reserved row and How We Work's top padding (215px on a phone against the page's
   ~144px rhythm). On the Agency page the reserved row is the section's foot. */
@media (max-width: 899px) { .ag-manifesto .lm__stage { padding-block-end: 0; } }

.lm {
  position: relative;
  background: var(--cm-black); color: var(--cm-white);
  overflow: clip;
}
.lm__stage {
  position: relative;
  display: grid; grid-template-rows: auto 1fr auto; row-gap: var(--space-6);
  min-block-size: max(100svh, 46rem);
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-7);
}

/* ---------- Meta line (label + hint) and foot (back + note) ---------- */
.lm__meta, .lm__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); }
.lm .page-label { margin: 0; color: var(--cm-ink-300); }
.lm__hint, .lm__note { margin: 0; font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-400); }
:lang(ar) .lm__hint, :lang(ar) .lm__note { font-size: 13px; letter-spacing: 0; text-transform: none; }
.lm__hint--touch { display: none; }
.lm__foot { min-block-size: 2.75rem; align-items: center; }
.lm__note { margin-inline-start: auto; }
.lm__back {
  display: inline-flex; align-items: center; gap: var(--space-3);
  min-block-size: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: var(--weight-medium); color: var(--cm-white);
}
.lm__back[hidden] { display: none; }
.lm__back-key { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cm-ink-400); padding-inline-end: var(--space-3); border-inline-end: 1px solid var(--cm-ink-600); }
.lm__back:hover { color: var(--cm-ink-200); }

/* ---------- The composition ---------- */
.lm__list {
  align-self: center;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gap);
  margin: 0; padding: 0; list-style: none;
}
.lm-item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.lm-item + .lm-item { margin-block-start: -0.02em; }

.lm-word {
  --s: 10vw;
  position: relative; z-index: 1;
  margin: 0; padding: 0; background: none; border: 0; color: inherit; cursor: pointer;
  font-family: var(--font-display); font-size: var(--s); line-height: 0.84;
  white-space: nowrap; text-align: start;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* never blocks vertical page scrolling */
  transition: opacity 700ms var(--ease-out);
}
.lm-word__drift { display: inline-block; }
.lm-word--heavy { font-weight: var(--weight-black); letter-spacing: -0.055em; }
.lm-word--thin  { font-weight: var(--weight-thin);  letter-spacing: -0.035em; }
.lm-word__n {
  display: inline-block; vertical-align: top; margin-block-start: 0.55em; margin-inline-end: 0.9rem;
  font-family: var(--font-latin); font-size: 12px; font-weight: var(--weight-medium); letter-spacing: 0.12em; line-height: 1;
  color: var(--cm-ink-400); transition: color var(--dur-ui) var(--ease-standard);
}
.lm-stop { position: relative; color: inherit; }
.lm-stop.is-lit { color: var(--cm-orange); }          /* without JS: the idea rests on the last word */
.lm-stop.is-anchor { color: transparent; }           /* the orange dot sits exactly on this glyph */
:lang(ar) .lm-stop { font-family: var(--font-latin); }   /* Plex Arabic has no "." of its own: use the brand's round Poppins stop, not a system fallback */
.lm-word:focus-visible { outline: 2px solid var(--cm-white); outline-offset: 0.12em; }
.lm-word:hover .lm-word__n, .lm-word.is-on .lm-word__n { color: var(--cm-white); }

/* Statements: set in the negative space each word leaves in its row */
.lm-say {
  margin: 0; max-inline-size: 22ch;
  font-size: clamp(1.25rem, 0.85rem + 1.15vw, 2.125rem); font-weight: var(--weight-light); line-height: 1.28; letter-spacing: -0.01em;
  color: var(--cm-white); text-wrap: balance;
}
/* Desktop: a statement never changes the poster. Its box has no height, so it adds
   nothing to the row; the text overflows from the row middle (or foot) into the
   negative space reserved for it. */
@media (min-width: 900px) {
  .lm-say { display: flex; align-items: center; block-size: 0; }
  .lm-item--1 .lm-say, .lm-item--4 .lm-say { align-items: flex-end; }
  .lm-item--3 .lm-say { align-items: flex-start; }
  .lm-item--3 .lm-say__body { margin-block-start: var(--space-6); }
  :lang(ar) .lm-item--1 .lm-say, :lang(ar) .lm-item--4 .lm-say { align-items: center; }
}
.lm-say__body { display: block; }
.lm-say__w { display: inline-block; overflow: hidden; vertical-align: top; padding-block-end: 0.08em; margin-block-end: -0.08em; }
.lm-say__in { display: inline-block; }

/* English composition (≥900px): thin / HEAVY / thin / HEAVY, left–right–left–right */
.lm-item--1 .lm-word { --s: clamp(5rem, 12.5vw, 15rem); grid-column: 1 / 9; justify-self: start; }
.lm-item--1 .lm-say  { grid-column: 9 / -1; align-self: end; margin-block-end: 0.6em; }
.lm-item--2 .lm-word { --s: clamp(6rem, 16.5vw, 20rem); grid-column: 3 / -1; justify-self: end; grid-row: 1; }
.lm-item--2 .lm-say  { grid-column: 1 / 4; grid-row: 1; align-self: center; }
.lm-item--3 .lm-word { --s: clamp(3.5rem, 8.5vw, 10rem); grid-column: 2 / 9; grid-row: 1; justify-self: start; }
.lm-item--3 .lm-say  { grid-column: 2 / 6; grid-row: 1; align-self: end; justify-self: start; }   /* CONNECT has no free space beside it: its statement hangs below, into the corner IMPACT leaves */
.lm-item--4 .lm-word { --s: clamp(5.5rem, 13.5vw, 16rem); grid-column: 5 / -1; justify-self: end; grid-row: 1; }
.lm-item--4 .lm-say  { grid-column: 1 / 5; grid-row: 1; align-self: end; margin-block-end: 0.5em; }

/* Arabic composition, set on its own (not mirrored): HEAVY / thin / HEAVY / thin.
   Taller line-height so the shadda and dots are never clipped; 300 for the thin voice on black. */
:lang(ar) .lm-word { letter-spacing: 0; }
:lang(ar) .lm-word--heavy { font-weight: var(--weight-bold); }
:lang(ar) .lm-word--thin  { font-weight: var(--weight-light); }
/* In a down-left cascade a word's free corner is its far end: the number sits there */
:lang(ar) .lm-word__drift { position: relative; }
:lang(ar) .lm-word__n { position: absolute; inset-block-start: 0.5em; inset-inline-start: 100%; margin: 0; padding-inline-start: 0.9rem; }   /* in RTL inline-start is the right: right:100% puts it beyond the word's left end */
:lang(ar) .lm-say { line-height: 1.75; letter-spacing: 0; max-inline-size: 20ch; }
/* A diagonal cascade in the reading direction, top-right to bottom-left: each word
   starts a little further along than the one before, so the four read as one gesture
   and the poster's weight sits across its centre. Statements answer from the
   opposite side: the left for the first two words, the right for the last two. */
:lang(ar) .lm-word { line-height: 1; }
:lang(ar) .lm-item + .lm-item { margin-block-start: -0.12em; }
:lang(ar) .lm-item + .lm-item--3 { margin-block-start: -0.02em; }   /* clears the tail of ع (نبدع) from the dots of نتواصل */
:lang(ar) .lm-item + .lm-item--4 { margin-block-start: 0.08em; }    /* clears the shadda of نؤثّر from نتواصل */
:lang(ar) .lm-item--1 .lm-word { --s: clamp(4rem, 9.1vw, 10.5rem); grid-column: 1 / 6;  grid-row: 1; justify-self: start; }
:lang(ar) .lm-item--2 .lm-word { --s: clamp(4.25rem, 10.6vw, 12rem); grid-column: 4 / 10; grid-row: 1; justify-self: start; }
:lang(ar) .lm-item--3 .lm-word { --s: clamp(3.5rem, 8vw, 9rem); grid-column: 7 / -1; grid-row: 1; justify-self: start; }
:lang(ar) .lm-item--4 .lm-word { --s: clamp(3.75rem, 9.5vw, 10.75rem); grid-column: 10 / -1; grid-row: 1; justify-self: start; }
:lang(ar) .lm-item--1 .lm-say  { grid-column: 6 / -1; grid-row: 1; justify-self: start; align-self: center; margin: 0; }
:lang(ar) .lm-item--2 .lm-say  { grid-column: 10 / -1; grid-row: 1; justify-self: start; align-self: center; margin: 0; }
:lang(ar) .lm-item--3 .lm-say  { grid-column: 1 / 6;  grid-row: 1; justify-self: start; align-self: center; margin: 0; }
:lang(ar) .lm-item--4 .lm-say  { grid-column: 2 / 8;  grid-row: 1; justify-self: start; align-self: center; margin: 0; }
@media (min-width: 900px) {
  :lang(ar) .lm-item .lm-say { align-items: center; }
  :lang(ar) .lm-item--3 .lm-say__body { margin-block-start: 0; }
}

/* ---------- States (set by living-manifesto.js) ---------- */
.js .lm-say[hidden] { display: none; }
.lm.is-reading .lm-word:not(.is-on) { opacity: 0.14; }
.lm-dot {   /* the idea: one orange ellipse, positioned and sized by living-manifesto.js */
  position: absolute; top: 0; left: 0; right: auto; z-index: 3;
  inline-size: 100px; block-size: 100px; border-radius: 50%;
  background: var(--cm-orange); pointer-events: none;
  transform-origin: 50% 50%; will-change: transform;
}
.lm.is-fine .lm-word { cursor: grab; }
.lm.is-fine .lm-word.is-dragging { cursor: grabbing; z-index: 2; }
.lm.is-handling .lm-word:not(.is-dragging) { opacity: 0.3; }   /* while a word is held, the rest steps back so it stays readable */

/* ---------- Tablet and phone: a composed vertical poster ---------- */
@media (max-width: 899px) {
  .lm__stage { min-block-size: auto; row-gap: var(--space-7); padding-block: calc(var(--header-h) + var(--space-6)) var(--space-7); }
  .lm__hint--fine { display: none; }
  .lm__hint--touch { display: inline; }
  .lm__list { display: block; }
  .lm-item { display: flex; flex-direction: column; }
  .lm-item + .lm-item { margin-block-start: var(--space-2); }
  .lm-word, :lang(ar) .lm-word { max-inline-size: 100%; }
  .lm-item--1 .lm-word { --s: 21vw; align-self: flex-start; }
  .lm-item--2 .lm-word { --s: 19.5vw; align-self: flex-end; }
  .lm-item--3 .lm-word { --s: 16.5vw; align-self: flex-start; }
  .lm-item--4 .lm-word { --s: 18.5vw; align-self: flex-end; }
  /* the same cascade, compressed into one column */
  :lang(ar) .lm-item + .lm-item { margin-block-start: var(--space-1); }
  :lang(ar) .lm-item--1 .lm-word { --s: 22vw; align-self: flex-start; }
  :lang(ar) .lm-item--2 .lm-word { --s: 24vw; align-self: flex-start; margin-inline-start: 16%; }
  :lang(ar) .lm-item--3 .lm-word { --s: 18vw; align-self: flex-end; margin-inline-end: 4%; }
  :lang(ar) .lm-item--4 .lm-word { --s: 22vw; align-self: flex-end; }
  :lang(ar) .lm-item--1 .lm-say, :lang(ar) .lm-item--2 .lm-say { align-self: flex-start; text-align: start; }
  :lang(ar) .lm-item--2 .lm-say { margin-inline-start: 16%; }
  :lang(ar) .lm-item--3 .lm-say, :lang(ar) .lm-item--4 .lm-say { align-self: flex-end; text-align: end; }
  :lang(ar) .lm-item .lm-say { margin-block-start: var(--space-5); }   /* clear of descenders such as the tail of ع */
  :lang(ar) .lm-item + .lm-item--3 { margin-block-start: var(--space-2); }
  :lang(ar) .lm-item + .lm-item--4 { margin-block-start: var(--space-5); }   /* room for the shadda of نؤثّر */
  /* the number rides just above the word's far end, inside the screen */
  :lang(ar) .lm-word__n { inset-inline-start: auto; inset-inline-end: 0; inset-block-start: -1.1rem; padding: 0; }
  .lm-word__n { margin-inline-end: 0.5rem; margin-block-start: 0.4em; font-size: 11px; }
  .lm-say, :lang(ar) .lm-say { max-inline-size: 26ch; margin: var(--space-3) 0 var(--space-4); font-size: 1.25rem; align-self: auto; }
  .lm-item--2 .lm-say, .lm-item--4 .lm-say { align-self: flex-end; text-align: end; }
  .lm.is-reading .lm-word:not(.is-on) { opacity: 0.22; }
}

/* ---------- Reduced motion: state changes are instant ---------- */
@media (prefers-reduced-motion: reduce) { .lm-word, .lm-stop { transition: none; } }
.motion-reduce .lm-word, .motion-reduce .lm-stop { transition: none; }

/* Before the script runs, the words wait for their entrance; if it never runs, they appear anyway. */
.js:not(.motion-reduce) .lm[data-lm-pending] .lm-word__drift { opacity: 0; animation: lm-failsafe 0s linear 2.5s forwards; }
@keyframes lm-failsafe { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .js .lm[data-lm-pending] .lm-word__drift { opacity: 1; animation: none; } }