/* Maps & Spatial Design (map-work.html): the project index, and the two LA STAP
   research slides rebuilt in HTML around their illustrations. */

/* ---------- the three projects, as parallel cards ---------- */

.mw-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin: 6rem 0 0;
  padding: 0;
  list-style: none;
}

.mw-cards a {
  display: block;
  color: inherit;
  text-decoration: none;
}

.mw-thumb {
  aspect-ratio: 4 / 3;
  transition: border-color 0.3s ease;
}

.mw-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the LA STAP thumbnail: four of the journey illustrations in a row */
.mw-thumb-icons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4%;
  padding: 0 7%;
  background: #0b0b0c;
}

.mw-thumb-icons img {
  flex: 1;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
}

.mw-cards a:hover .mw-thumb {
  border-color: var(--accent);
}

.mw-card-project {
  margin: 2.8rem 0 1rem;
  color: var(--accent);
}

.mw-cards h3 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
}

/* ---------- room between a title and the image under it ---------- */

.cs-stage > .cs-stage-head {
  margin-bottom: -0.8rem;
}

.cs-stage > .cs-point + *,
.cs-stage > .cs-stage-head + figure {
  margin-top: 2rem;
}

.cs-statement + .cs-frame-hero {
  margin-top: 5rem;
}

.cs-sys-block > .cs-stage-head {
  margin-bottom: 3.2rem;
}

/* a title with a line of text under it keeps the two together */
.cs-sys-block > .cs-stage-head:has(+ .mw-note) {
  margin-bottom: 0.8rem;
}

.cs-stage > .cs-states {
  margin-top: 1.2rem;
}

/* every project lists the same details; a project with a client gets one more column */
.cs-section > .cs-meta {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 4rem 0 0;
}

.cs-section > .cs-meta + .cs-frame-hero {
  margin-top: 5rem;
}

.cs-frame-hero + .cs-stage {
  margin-top: 8rem;
}

/* the way out to the full case study, at the end of each section */
.mw-more-row {
  margin: 7rem 0 0;
}

/* sections here open with an eyebrow, not a page title, so every anchor
   lands with the eyebrow just under the top of the window */
.cs-section {
  scroll-margin-top: 3rem;
}

.mw-cards h3 br {
  display: inline;
}

/* a recording with its four beats beside it */
.mw-lead {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--gap);
  align-items: start;
  margin-top: 4rem;
}

.cs-stage-head + .mw-lead {
  margin-top: 0;
}

.mw-lead + .cs-bgstates {
  margin-top: 5rem;
}

.mw-note {
  max-width: 48rem;
  margin: 0;
}

.mw-more {
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-strong);
  text-decoration: none;
}

.mw-more:hover {
  color: var(--accent);
}

/* the arrow is always there, and steps forward on hover */
.mw-more .pd-arrow {
  opacity: 1;
  transform: none;
}

.mw-more:hover .pd-arrow {
  transform: translateX(0.4rem);
}

/* ---------- research slides ---------- */

.mw-slide {
  padding: 3rem;
  border: 1px solid var(--line);
  --slide-bg: #f7f7f7;
  border-radius: 1.4rem;
  background: var(--slide-bg);
  overflow-x: auto;
}

:root[data-theme="dark"] .mw-slide {
  --slide-bg: #262626;
}

/* ---------- Rider Journey, laid out like the original research slide ----------
   Six steps on one line, then a branch: up (dotted) to a transfer, which loops
   back to "locate bus stop", or down (solid) to the destination. Heights are
   fixed so the connectors can be drawn with plain borders:
   illustrations calc(8.5 * var(--u)) tall, the line calc(11 * var(--u)) below their top edge. */

.mw-slide {
  container-type: inline-size;
}

/* --u is 1/84 of the slide, so the whole drawing scales with it and always
   fits: nothing scrolls sideways. On a phone it stops shrinking and scrolls. */
.mw-rj {
  --u: max(100cqw / 84, 0.62rem);
  --rj-gap: calc(1.4 * var(--u));
  --rj-label: calc(7 * var(--u)); /* the column that names the touch point rows */
  --rj-col: calc((100% - var(--rj-label) - 7 * var(--rj-gap)) / 8.2); /* the last column is 2.2 wide */
  min-width: calc(84 * var(--u));
  --rj-ink: #8f8f8f;
  --rj-soft: #c4c4c4;
}

:root[data-theme="dark"] .mw-rj {
  --rj-ink: #8a8a8a;
  --rj-soft: #5c5c5c;
}

.mw-rj-map {
  position: relative;
  padding-top: calc(7 * var(--u));
  padding-left: calc(var(--rj-label) + var(--rj-gap));
}

.mw-rj-steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2.2fr);
  gap: var(--rj-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mw-rj-steps > li {
  position: relative;
  min-width: 0;
}

/* the photo of each step, as on the original slide */
.mw-rj-photo {
  display: block;
  width: 100%;
  height: calc(11.6 * var(--u));
  margin: 0;
  object-fit: cover;
}

/* the illustration of each step sits on the line, where the slide had a dot:
   big enough to read, small enough to leave the photo in charge */
.mw-rj-dot {
  position: absolute;
  z-index: 1;
  top: calc(12.8 * var(--u));
  left: 0;
  width: calc(4.4 * var(--u));
  height: calc(4.4 * var(--u));
  margin: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 calc(0.35 * var(--u)) var(--slide-bg);
}

/* the line from each step to the next one, 15u below the top of the photos */
.mw-rj-steps > li:not(.mw-rj-end)::before {
  content: "";
  position: absolute;
  top: calc(15 * var(--u) - 1.5px);
  left: calc(2.2 * var(--u));
  width: calc(100% + var(--rj-gap));
  border-top: 3px solid var(--rj-ink);
}

/* planning happens before the rider reaches the system: lighter, dotted */
.mw-rj-steps > li:first-child::before {
  border-top: 3px dotted var(--rj-soft);
}

.mw-rj h4 {
  margin: calc(6.8 * var(--u)) 0 calc(0.8 * var(--u));
  font-size: calc(1.25 * var(--u));
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink-strong);
}

.mw-rj-steps ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(1.05 * var(--u));
  line-height: 1.3;
}

.mw-rj-steps ul li + li {
  margin-top: calc(0.6 * var(--u));
}

/* the last column: transfer above the line, destination below it */
.mw-rj-end {
  min-height: calc(30 * var(--u));
}

.mw-rj-connect,
.mw-rj-arrive {
  position: absolute;
  left: calc(3.4 * var(--u));
  right: 0;
  padding-left: calc(5.2 * var(--u));
}

.mw-rj-connect {
  top: calc(-5.5 * var(--u));
}

.mw-rj-arrive {
  top: calc(16.2 * var(--u));
}

.mw-rj-end .mw-rj-photo {
  width: calc(5.5 * var(--u));
  height: calc(7.3 * var(--u));
  margin-left: calc(-5.2 * var(--u));
}

.mw-rj-end .mw-rj-dot {
  top: calc(7.9 * var(--u));
}

.mw-rj-end h4 {
  margin: calc(1.4 * var(--u)) 0 calc(0.6 * var(--u));
}

/* dotted branch up to the transfer, solid trunk down to the destination */
.mw-rj-end::before,
.mw-rj-end::after {
  content: "";
  position: absolute;
  left: calc(2.2 * var(--u) - 1.5px);
  width: calc(1.4 * var(--u));
}

.mw-rj-end::before {
  top: calc(4.6 * var(--u) - 1.5px);
  height: calc(10.4 * var(--u));
  border-top: 3px dotted var(--rj-soft);
  border-left: 3px dotted var(--rj-soft);
  border-top-left-radius: calc(1 * var(--u));
}

.mw-rj-end::after {
  top: calc(15 * var(--u));
  height: calc(11.3 * var(--u) + 1.5px);
  border-bottom: 3px solid var(--rj-ink);
  border-left: 3px solid var(--rj-ink);
  border-bottom-left-radius: calc(1 * var(--u));
}

/* the transfer loops back to "locate bus stop" */
.mw-rj-loop {
  position: absolute;
  top: calc(0.4 * var(--u));
  left: calc(var(--rj-label) + var(--rj-col) + 2 * var(--rj-gap) + 4.4 * var(--u));
  right: calc(2.2 * var(--rj-col) - 6.15 * var(--u));
  height: calc(1.1 * var(--u));
  border: 3px dotted var(--rj-soft);
  border-bottom: 0;
  border-radius: calc(1 * var(--u)) calc(1 * var(--u)) 0 0;
}

.mw-rj-loop::before {
  content: "";
  position: absolute;
  left: -3px;
  top: calc(1 * var(--u));
  height: calc(5.2 * var(--u));
  border-left: 3px dotted var(--rj-soft);
}

.mw-rj-loop::after {
  content: "";
  position: absolute;
  right: calc(-0.65 * var(--u) - 1.5px);
  top: calc(0.4 * var(--u));
  border: calc(0.65 * var(--u)) solid transparent;
  border-top: calc(0.9 * var(--u)) solid var(--rj-soft);
  border-bottom: 0;
}

/* touch point rows: the name in the label column, each cell under its step */
.mw-rj-row {
  display: grid;
  grid-template-columns: var(--rj-label) minmax(0, 1fr);
  gap: var(--rj-gap);
  align-items: start;
  margin-top: calc(2.4 * var(--u));
  padding-top: calc(1.2 * var(--u));
  border-top: 1px solid var(--line);
}

.mw-rj-row + .mw-rj-row {
  margin-top: calc(1.2 * var(--u));
}

.mw-rj-row p {
  margin: 0;
  font-size: calc(1.05 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink-strong);
}

.mw-rj-row ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(0, 2.2fr);
  gap: var(--rj-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(1.05 * var(--u));
  line-height: 1.3;
  color: var(--muted);
}

/* the last cell lines up with the transfer and destination text above it */
.mw-rj-row li:last-child {
  padding-left: calc(8.6 * var(--u));
}

/* ---------- Design Opportunities, in the same slide format ---------- */

.mw-do {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(7 * var(--u));
  margin: 0;
  padding: calc(1 * var(--u)) 0;
  list-style: none;
}

.mw-do > li {
  position: relative;
  display: flex;
  flex-direction: column;
}

.mw-do h4 {
  flex: 1;
  margin: 0 0 calc(1.4 * var(--u));
}

.mw-do img {
  display: block;
  margin: 0;
  border-radius: 50%;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

/* the arrow from one move to the next, level with the circles */
.mw-do > li:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: calc(-3.5 * var(--u));
  bottom: calc((84 * var(--u) - 21 * var(--u)) / 8);
  transform: translate(50%, 50%);
  font-size: calc(2 * var(--u));
  line-height: 1;
  color: var(--rj-ink);
}

/* ---------- iPhone mockups on a near-black stage ---------- */

.mw-stage {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2.4rem;
  margin: 0;
  padding: 4.5rem 4rem;
  list-style: none;
  border-radius: 1.4rem;
  background: #19191c;
}

.mw-stage-pair {
  grid-template-columns: repeat(2, 24rem);
  gap: 5rem;
  justify-content: center;
  padding: 6rem 4rem;
}

/* percentages keep the bezel and corners in proportion at any phone width */
.mw-phone {
  position: relative;
  padding: 3.4%;
  border-radius: 17% / 7.9%;
  background: #060607;
  box-shadow: 0 0 0 1px #3b3440, 0 2.4rem 4rem rgba(0, 0, 0, 0.45);
}

.mw-phone img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 844;
  border-radius: 14% / 6.5%;
  background: #000;
}

/* dynamic island */
.mw-phone::after {
  content: "";
  position: absolute;
  top: 2.9%;
  left: 50%;
  width: 26%;
  aspect-ratio: 3.5;
  border-radius: 99rem;
  background: #060607;
  transform: translateX(-50%);
}

@media (max-width: 800px) {
  .mw-stage {
    grid-template-columns: repeat(5, 15rem);
    padding: 3rem 2rem;
    overflow-x: auto;
  }

  .mw-stage-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }

  .mw-lead {
    grid-template-columns: 1fr;
  }

  .cs-section > .cs-meta {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mw-cards {
    grid-template-columns: 1fr;
    gap: 5rem;
  }

  .mw-slide {
    padding: 2rem;
  }

}

/* the two tradeoff cases sit clear of the line that introduces them */
.cs-sys-block + .cs-cases {
  margin-top: 3.2rem;
}

/* ---------- each section opens with its name, then one line on what it is ---------- */

.mw-title {
  margin: 0;
  font-size: 4.4rem;
  line-height: 1.1;
}

.mw-sub {
  max-width: 56rem;
  margin: 1.8rem 0 0;
}

/* ---------- a live crop of another page ---------- */

.mw-live {
  position: relative;
  background: #101010;
}

/* the page is laid out at desktop width and taller than all of its content
   (about 5,700px today), so there is nothing left to scroll: the wheel can't
   pull the sections below the hero into view, and the fixed chat button and
   cookie notice sit far below the crop */
.mw-live iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 1440px;
  height: 9000px;
  border: 0;
  transform-origin: 0 0;
}

.cs-meta a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* longer section names wrap under themselves, clear of the number */
.cs-nav ol a {
  line-height: 1.3;
}

/* ---------- dark mode: two background colors, nothing else ----------
   Panels take the Rider Journey grey; the phone and live-page stages take the
   near-black of the BMW & MINI hero. Every one keeps its thin light outline. */

:root[data-theme="dark"] .cs-body {
  --mw-panel: #262626;
  --mw-deep: #111111;
}

:root[data-theme="dark"] .cs-body .cs-frame,
:root[data-theme="dark"] .cs-body .mw-slide,
:root[data-theme="dark"] .cs-body .cs-diagram svg,
:root[data-theme="dark"] .cs-body .cs-spec-row svg,
:root[data-theme="dark"] .cs-body .cs-vtile svg,
:root[data-theme="dark"] .cs-body .cs-case-fig svg,
:root[data-theme="dark"] .cs-body .cs-compare svg,
:root[data-theme="dark"] .cs-body .cs-compare img {
  background: var(--mw-panel);
}

/* the slide's ring around each illustration follows the panel */
:root[data-theme="dark"] .cs-body .mw-slide {
  --slide-bg: var(--mw-panel);
}

/* the live specimen paints its own ground; its default follows the panel (see map-work.html) */
:root[data-theme="dark"] .cs-body .cs-try {
  --cad-ground: var(--mw-panel);
}

:root[data-theme="dark"] .cs-body .mw-stage,
:root[data-theme="dark"] .cs-body .mw-live {
  border: 1px solid var(--line);
  background: var(--mw-deep);
}

/* cards keep their own thumbnails, so only their outline follows the theme */
:root[data-theme="dark"] .mw-thumb {
  border-color: var(--line);
}

/* the clear cover over the globe: it lets the wheel scroll the page, and a click hands the globe over */
.mw-live-hold {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.mw-live-hold span {
  padding: 0.8rem 1.6rem;
  border-radius: 99rem;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mw-live-hold:hover span,
.mw-live-hold:focus-visible span {
  opacity: 1;
}

.mw-live.live .mw-live-hold {
  display: none;
}