/*
 * Final visual corrections layered over the exact production build recovered
 * on 2026-08-13. This file intentionally changes only the marked hero and
 * perspective-journey details; all later sections remain untouched.
 */

/* -------------------------------------------------------------------------- */
/* Hero — close the city/terrain seam without altering the approved movement. */
/* -------------------------------------------------------------------------- */

.living-ink-prototype
  .mp-city__plane[data-plane='nearCity']
  .mp-city__picture {
  transform: scaleX(1.052);
  transform-origin: 100% 50%;
}

/* The expanded city should read as one landscape, never as stacked cutouts. */
.living-ink-prototype
  .mp-city__plane[data-plane='nearCity']
  .mp-city__art {
  filter: sepia(0.025) saturate(0.92) contrast(0.985)
    drop-shadow(0 1px 0 rgb(23 23 22 / 0.08));
}

.living-ink-prototype
  .mp-city__plane[data-plane='midgroundTerrain']
  .mp-city__art {
  filter: sepia(0.018) saturate(0.94) contrast(0.99)
    drop-shadow(0 1.2px 0.9px rgb(23 23 22 / 0.11));
}

/* -------------------------------------------------------------------------- */
/* Newspaper — smaller, right-registered, with the event still visible.       */
/* -------------------------------------------------------------------------- */

.living-ink-prototype .mp-newspaper__registration {
  --mp-newspaper-x-offset: 22.5vw;
}

.living-ink-prototype .mp-newspaper__sheet {
  width: min(58vw, 790px);
  min-height: min(58svh, 525px);
  padding: clamp(1.15rem, 2vw, 2.15rem);
}

.living-ink-prototype .mp-newspaper__header h2 {
  font-size: clamp(2rem, 3.15vw, 3.15rem);
}

.living-ink-prototype .mp-newspaper__lead {
  column-gap: clamp(1.1rem, 2vw, 2rem);
  padding-top: clamp(1.05rem, 2.3svh, 1.8rem);
}

.living-ink-prototype .mp-newspaper__lead h3 {
  font-size: clamp(2.25rem, 4.05vw, 4.25rem);
}

/* A suspended paper window: long ropes, the same city printed into its lower
   half, and illustrated smoke/fire retained as ink on the paper. */
.living-ink-prototype .mp-newspaper-note__card {
  top: 23.5%;
  left: clamp(18px, 3vw, 64px);
  width: min(23vw, 372px);
  aspect-ratio: 3 / 2;
  filter: drop-shadow(0 16px 13px rgb(23 23 22 / 0.19));
  transform-origin: 15% -112%;
  isolation: isolate;
}

.living-ink-prototype .mp-newspaper-note__card::before {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 84%;
  left: 0;
  height: 43svh;
  background:
    repeating-linear-gradient(
        25deg,
        transparent 0 3px,
        rgb(55 46 40 / 0.7) 3.5px 4.4px,
        transparent 5px 8px
      )
      15.1% 0 / 8px 100% no-repeat,
    repeating-linear-gradient(
        -25deg,
        transparent 0 3px,
        rgb(55 46 40 / 0.7) 3.5px 4.4px,
        transparent 5px 8px
      )
      85.2% 0 / 8px 100% no-repeat;
  content: '';
  filter: sepia(0.26);
  transform-origin: 50% 100%;
}

.living-ink-prototype .mp-newspaper-note__card::after {
  position: absolute;
  z-index: 1;
  inset: 11.5% 4.6% 3.7%;
  background:
    linear-gradient(
      180deg,
      rgb(240 235 224 / 0.99) 0 39%,
      rgb(240 235 224 / 0.82) 50%,
      rgb(240 235 224 / 0.16) 66%,
      rgb(240 235 224 / 0.04) 100%
    ),
    url('/assets/distant-city-CpUBsTgA.png') 39% 104% / 205% auto no-repeat,
    #eee9de;
  clip-path: polygon(
    1% 2%,
    20% 0,
    40% 1.4%,
    61% 0.4%,
    80% 1.6%,
    99% 0,
    100% 96%,
    82% 98%,
    62% 96.6%,
    41% 99%,
    21% 97%,
    0 99%
  );
  content: '';
  filter: grayscale(1) sepia(0.12) contrast(0.94);
}

.living-ink-prototype .mp-newspaper-note__card img {
  z-index: 2;
  opacity: 0.82;
  mix-blend-mode: multiply;
  filter: sepia(0.08) saturate(0.78) contrast(0.96);
}

.living-ink-prototype .mp-newspaper-note__card p {
  z-index: 3;
  top: 18.5%;
  right: 14.5%;
  left: 14.5%;
  max-width: 28ch;
  margin-inline: auto;
  font-size: clamp(0.82rem, 0.92vw, 1rem);
  line-height: 1.18;
  text-align: center;
  text-shadow:
    0 1px 0 rgb(255 253 247 / 0.9),
    0 0 10px rgb(240 235 224 / 0.82);
}

.living-ink-prototype .mp-newspaper-note svg {
  top: 35%;
  left: min(15.8vw, 290px);
  width: 42vw;
  height: 17svh;
}

/* -------------------------------------------------------------------------- */
/* Role journey — seamless plate, true ceiling chains and directional props.  */
/* -------------------------------------------------------------------------- */

.living-ink-prototype .perspective-artwork__environment {
  --role-panorama-x: 0%;
  isolation: isolate;
}

/* Seven real drawings form one long lateral stage: four role rooms with a
   connective architectural drawing between every pair. Role changes translate
   the physical strip through the intermediary room; nothing dissolves. */
.living-ink-prototype .perspective-artwork__environment::before {
  position: absolute;
  z-index: 0;
  inset: 0 auto 0 0;
  width: 700%;
  background-image: url('/assets/editorial/roles-v3/role-stage-panorama-v3-1600.webp');
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  filter: sepia(0.035) saturate(0.88) contrast(0.985);
  transform: translate3d(var(--role-panorama-x), 0, 0);
  transition: transform 1.08s cubic-bezier(0.23, 1, 0.32, 1);
  will-change: transform;
}

.living-ink-prototype .perspective-artwork__environment > svg {
  position: relative;
  z-index: 1;
}

.living-ink-prototype
  .perspective-artwork__environment
  [data-route-base-source] {
  opacity: 0;
}

.living-ink-prototype
  .perspective-journey[data-route-role='traveler']
  .perspective-artwork__environment {
  --role-panorama-x: 0%;
}

.living-ink-prototype
  .perspective-journey[data-route-role='operator']
  .perspective-artwork__environment {
  --role-panorama-x: -28.5714286%;
}

.living-ink-prototype
  .perspective-journey[data-route-role='journalist']
  .perspective-artwork__environment {
  --role-panorama-x: -57.1428571%;
}

.living-ink-prototype
  .perspective-journey[data-route-role='analyst']
  .perspective-artwork__environment {
  --role-panorama-x: -85.7142857%;
}

/* The radio is no longer suspended. The operator gets three independent
   ceiling-chain runs instead, all detached from equipment. */
.living-ink-prototype [data-role-prop='operator-radio'] {
  display: none;
}

.living-ink-prototype .perspective-artwork__middle-ground::before,
.living-ink-prototype .perspective-artwork__middle-ground::after,
.living-ink-prototype .perspective-artwork__props::before {
  position: absolute;
  top: -6%;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: contain;
  content: '';
  filter: sepia(0.16) saturate(0.74)
    drop-shadow(1px 1px 0 rgb(243 241 235 / 0.46));
  opacity: 0;
  transform-origin: 50% 0;
  transition:
    opacity 0.12s var(--editorial-ease-out),
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.living-ink-prototype .perspective-artwork__middle-ground::before {
  left: 36.7%;
  width: 2.8%;
  height: 52%;
  background-image: url('/assets/editorial/roles-v3/chain-group-1.png');
  transform: translate3d(-24%, -28%, 0) rotate(-1.4deg);
}

.living-ink-prototype .perspective-artwork__middle-ground::after {
  left: 43.2%;
  width: 4.3%;
  height: 35%;
  background-image: url('/assets/editorial/roles-v3/chain-group-2.png');
  transform: translate3d(22%, -34%, 0) rotate(1.7deg);
}

.living-ink-prototype .perspective-artwork__props::before {
  z-index: 0;
  left: 50.1%;
  width: 6.6%;
  height: 45%;
  background-image: url('/assets/editorial/roles-v3/chain-group-3.png');
  transform: translate3d(-18%, -30%, 0) rotate(-1.1deg);
}

.living-ink-prototype
  .perspective-journey[data-route-role='operator']
  .perspective-artwork__middle-ground::before,
.living-ink-prototype
  .perspective-journey[data-route-role='operator']
  .perspective-artwork__middle-ground::after,
.living-ink-prototype
  .perspective-journey[data-route-role='operator']
  .perspective-artwork__props::before {
  opacity: 0.84;
  transform: translate3d(0, 0, 0) rotate(0deg);
  animation: role-chain-breathe 3.8s ease-in-out infinite alternate;
}

.living-ink-prototype
  .perspective-journey[data-route-role='operator']
  .perspective-artwork__middle-ground::after {
  animation-delay: -1.25s;
  animation-duration: 4.35s;
}

.living-ink-prototype
  .perspective-journey[data-route-role='operator']
  .perspective-artwork__props::before {
  animation-delay: -2.2s;
  animation-duration: 4.8s;
}

@keyframes role-chain-breathe {
  from {
    rotate: -0.34deg;
    translate: -0.7px 0;
  }
  to {
    rotate: 0.34deg;
    translate: 0.7px 1px;
  }
}

.living-ink-prototype .perspective-artwork__role-prop {
  transition:
    opacity 0.1s var(--editorial-ease-out),
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.living-ink-prototype
  .perspective-artwork__role-prop[data-active='true'] {
  opacity: 0.94;
  transform: translate3d(0, 0, 0) rotate(0deg);
}

/* Traveler props occupy separate pieces of ground and arrive from different
   edges; they no longer rise in one vertical pile. */
.living-ink-prototype [data-role-prop='traveler-shrubs'] {
  bottom: -2.8%;
  left: -2.4%;
  width: 23%;
  transform: translate3d(-52%, 47%, 0) rotate(-2.3deg);
}

.living-ink-prototype [data-role-prop='traveler-map'] {
  bottom: -2.5%;
  left: 10.8%;
  width: 13.1%;
  transform: translate3d(-15%, 61%, 0) rotate(5deg);
}

.living-ink-prototype [data-role-prop='traveler-shrub-small'] {
  bottom: -0.8%;
  left: 22.1%;
  width: 7.2%;
  transform: translate3d(48%, 58%, 0) rotate(-3deg);
}

.living-ink-prototype [data-role-prop='journalist-lamp'] {
  top: -3.6%;
  left: 66.8%;
  width: 8.2%;
  transform: translate3d(22%, -62%, 0) rotate(3deg);
}

.living-ink-prototype [data-role-prop='journalist-camera'] {
  right: 16.2%;
  bottom: -2.4%;
  width: 7.8%;
  transform: translate3d(72%, 58%, 0) rotate(5deg);
}

.living-ink-prototype [data-role-prop='journalist-map'] {
  right: 25.2%;
  bottom: -4.4%;
  width: 11.8%;
  transform: translate3d(-26%, 68%, 0) rotate(-3deg);
}

.living-ink-prototype [data-role-prop='analyst-map'] {
  right: 0.5%;
  bottom: -4.8%;
  width: 13.4%;
  transform: translate3d(68%, 64%, 0) rotate(4deg);
}

.living-ink-prototype [data-role-prop='analyst-lamp'] {
  top: -4.2%;
  right: 6.2%;
  width: 7.4%;
  transform: translate3d(38%, -62%, 0) rotate(-3deg);
}

/* Every character receives a contact treatment appropriate to its setting so
   no cutout floats over the drawn room. */
.living-ink-prototype .perspective-artwork__role-contact {
  position: absolute;
  z-index: 0;
  right: 4%;
  bottom: 0.6%;
  left: 4%;
  display: block;
  height: 3.5%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgb(23 23 22 / 0.2),
    rgb(23 23 22 / 0.08) 42%,
    transparent 72%
  );
  filter: blur(1.2px);
  mix-blend-mode: multiply;
}

.living-ink-prototype
  [data-role-cutout='journalist']
  .perspective-artwork__role-contact,
.living-ink-prototype
  [data-role-cutout='analyst']
  .perspective-artwork__role-contact {
  right: -19%;
  bottom: -0.4%;
  left: -15%;
  height: 8%;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgb(237 232 221 / 0.9), rgb(203 194 179 / 0.64)),
    radial-gradient(rgb(23 23 22 / 0.08) 0.6px, transparent 0.8px);
  background-size: auto, 5px 5px;
  clip-path: polygon(3% 8%, 98% 0, 100% 70%, 95% 100%, 0 93%);
  filter: none;
}

/* Keep the editorial copy column inside the viewport at very wide desktop
   sizes while leaving the full-height illustrated stage dominant. */
@media (min-width: 1101px) {
  .living-ink-prototype .perspective-journey__stage {
    grid-template-columns: minmax(0, 1fr) minmax(23.5rem, 25vw);
  }

  .living-ink-prototype .perspective-journey__copy-column {
    overflow: hidden;
  }

  .living-ink-prototype .perspective-selector__button {
    min-width: 0;
    padding-inline: 0.35rem;
    font-size: clamp(0.8rem, 0.9vw, 0.95rem);
  }

  .living-ink-prototype .perspective-copy__article h3,
  .living-ink-prototype .perspective-copy__summary {
    max-width: min(100%, 34ch);
  }
}

@media (max-width: 899px) and (orientation: portrait) {
  .living-ink-prototype
    .mp-city__plane[data-plane='nearCity']
    .mp-city__picture {
    transform: scaleX(1.035);
  }

  .living-ink-prototype .mp-newspaper__registration {
    --mp-newspaper-x-offset: 8vw;
  }

  .living-ink-prototype .mp-newspaper__sheet {
    width: min(76vw, 390px);
    min-height: min(59svh, 540px);
    padding: 0.95rem;
  }

  .living-ink-prototype .mp-newspaper__header h2 {
    font-size: clamp(1.55rem, 7.2vw, 2.15rem);
  }

  .living-ink-prototype .mp-newspaper__lead {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto auto;
    padding-top: 0.8rem;
  }

  .living-ink-prototype .mp-newspaper__lead h3 {
    font-size: clamp(2rem, 8.8vw, 3.2rem);
  }

  .living-ink-prototype .mp-newspaper__lead-image {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0.7rem;
  }

  .living-ink-prototype .mp-newspaper__excerpt {
    grid-column: 1;
    grid-row: 4;
    max-width: none;
    margin-top: 0.65rem;
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  .living-ink-prototype .mp-newspaper__excerpt p:last-child {
    display: none;
  }

  .living-ink-prototype .mp-newspaper__rule {
    grid-column: 1;
    grid-row: 5;
  }

  .living-ink-prototype .mp-newspaper-note__card {
    top: 15%;
    left: 1.5vw;
    width: min(39vw, 160px);
  }

  .living-ink-prototype .mp-newspaper-note__card::before {
    bottom: 84%;
    height: 31svh;
  }

  .living-ink-prototype .mp-newspaper-note__card p {
    top: 18%;
    right: 13%;
    left: 13%;
    font-size: clamp(0.55rem, 2.35vw, 0.67rem);
    line-height: 1.15;
  }

  .living-ink-prototype .mp-newspaper-note svg {
    top: 26%;
    left: 33vw;
    width: 48vw;
    height: 18svh;
  }

  .living-ink-prototype .perspective-artwork__middle-ground::before {
    left: 38.1%;
    width: 2.1%;
    height: 43%;
  }

  .living-ink-prototype .perspective-artwork__middle-ground::after {
    left: 42.8%;
    width: 3.3%;
    height: 29%;
  }

  .living-ink-prototype .perspective-artwork__props::before {
    left: 47.7%;
    width: 5.2%;
    height: 38%;
  }
}

@media (max-width: 899px) {
  .living-ink-prototype .perspective-artwork__environment::before {
    background-image: url('/assets/editorial/roles-v3/role-stage-panorama-v3-900.webp');
  }
}

@media (prefers-reduced-motion: reduce) {
  .living-ink-prototype
    .perspective-journey[data-route-role='operator']
    .perspective-artwork__middle-ground::before,
  .living-ink-prototype
    .perspective-journey[data-route-role='operator']
    .perspective-artwork__middle-ground::after,
  .living-ink-prototype
    .perspective-journey[data-route-role='operator']
    .perspective-artwork__props::before {
    animation: none;
  }

  .living-ink-prototype .perspective-artwork__environment::before {
    transition-duration: 1ms;
  }
}