/* Final mobile layer — intentionally loaded last. */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

@media (max-width: 56.25rem) {
  :root {
    --icon-left: calc(0.45rem + var(--safe-left));
    --icon-size: 2.25rem;
    --content-inline-start: calc(1rem + var(--safe-left));
    --content-inline-end: calc(1rem + var(--safe-right));
    --text-body-size: clamp(0.98rem, 4vw, 1.1rem);
    --text-body-leading: 1.45;
    font-size: 16px;
  }

  html,
  body {
    width: 100%;
    min-height: 100%;
    overscroll-behavior-y: none;
  }

  body {
    min-height: 100svh;
    -webkit-text-size-adjust: 100%;
  }

  button,
  a {
    -webkit-tap-highlight-color: transparent;
  }

  .stage,
  .page,
  .scene {
    height: 100svh;
  }

  .scene {
    padding: calc(5.25rem + var(--safe-top)) var(--content-inline-end)
      calc(2rem + var(--safe-bottom)) var(--content-inline-start);
    overflow: hidden;
  }

  .nav {
    height: calc(4.5rem + var(--safe-top));
  }

  .kolam-link {
    left: var(--icon-left);
    top: calc(1rem + var(--safe-top));
    width: var(--icon-size);
    height: var(--icon-size);
  }

  .name-link {
    top: calc(1.3rem + var(--safe-top));
    right: calc(0.9rem + var(--safe-right));
    font-size: 0.68rem;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .nav-tools {
    top: calc(1.15rem + var(--safe-top));
    gap: clamp(0.65rem, 3.2vw, 1rem);
  }

  .nav-tool {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
  }

  .nav-tool-icon {
    max-width: 1.35rem;
    height: 1.1rem;
  }

  .scroll-dots {
    display: none !important;
  }

  .small-text,
  .type-text,
  [class*="type-text-scene"] {
    max-width: 100%;
  }

  /* Intro poem scenes */
  .title-line,
  .scene2-title,
  .scene4-title,
  .scene5-title,
  .scene6-title,
  .scene7-title {
    width: min(100%, 30rem) !important;
    max-width: 100% !important;
  }

  .scene1 .grandmother,
  .scene1 .kolam-word,
  .scene2-simplest {
    font-size: clamp(2.65rem, 13vw, 4rem) !important;
    line-height: 0.96 !important;
  }

  .scene3-grid {
    width: 100% !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.75rem !important;
    align-items: center;
  }

  .scene3-grid .kolam-part {
    min-width: 0;
    width: 100%;
  }

  .scene3-grid .part-main {
    font-size: clamp(1.85rem, 8.5vw, 2.8rem) !important;
  }

  .circle-drawing,
  .loop-drawing {
    max-height: 5.75rem;
  }

  
  

  

  .scene9-content,
  .scene10-content,
  .scene11-content,
  .scene12-content,
  .scene13-content {
    inset: calc(4.75rem + var(--safe-top)) var(--content-inline-end)
      calc(1.25rem + var(--safe-bottom)) var(--content-inline-start) !important;
  }

  .scene9-row {
    grid-template-columns: 3.2rem minmax(0, 1fr) !important;
  }

  .scene10-table {
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 33rem;
  }

  .scene10-content {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .scene10-content::-webkit-scrollbar { display: none; }

  .scene11-columns {
    overflow-y: auto;
    padding-bottom: 1rem;
    scrollbar-width: none;
  }

  .scene12-photo-field {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    overflow-y: auto;
    max-height: 68svh;
    gap: 1rem !important;
    scrollbar-width: none;
  }

  .scene12-item {
    max-width: 8rem !important;
  }

  .scene13-text,
  .scene14-text {
    top: 20% !important;
    width: calc(100vw - 2rem - var(--safe-left) - var(--safe-right)) !important;
  }

  .scene13-carousel {
    width: min(10rem, 42vw) !important;
    bottom: calc(8svh + var(--safe-bottom)) !important;
  }

  .scene14-kolam {
    width: min(90vw, 24rem) !important;
    bottom: calc(10svh + var(--safe-bottom)) !important;
  }

  .scene15-fixed {
    inset: calc(5.4rem + var(--safe-top)) var(--content-inline-end)
      calc(1.5rem + var(--safe-bottom)) var(--content-inline-start) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(1.25rem, 4svh, 2.25rem) !important;
    transform: none !important;
  }

  .scene15-changing {
    width: 100% !important;
  }

  /* Keep “A line that wanders.” visually together on mobile. */
  .scene15-wander-line {
    gap: 0.18rem !important;
    height: 3.55rem !important;
  }

  .scene15-a {
    padding-bottom: 0.02rem !important;
  }

  /* Full-screen overlays */
  .poem-menu {
    padding: calc(4.7rem + var(--safe-top)) var(--content-inline-end)
      calc(1rem + var(--safe-bottom)) var(--content-inline-start) !important;
  }

  .recital-view.active {
    grid-template-rows: auto minmax(0,1fr) auto auto;
  }

  .recital-lyrics {
    width: 100% !important;
    padding-block: 27svh !important;
    mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  }

  .recital-line {
    margin: 0.75rem 0 !important;
    padding: 0.25rem !important;
    font-size: clamp(0.84rem, 3.6vw, 1rem) !important;
    line-height: 1.45 !important;
  }

  .recital-player {
    padding: 0.5rem 0;
  }

  .recital-play {
    min-width: 5rem;
    min-height: 2.75rem;
  }

  .recital-view.active {
    position: relative;
    padding-bottom: calc(4.6rem + var(--safe-bottom));
  }

  .recital-credit {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    width: max-content;
    max-width: calc(100% - 3rem);
    transform: translateX(-50%);
    color: var(--yellow);
    font-size: 0.64rem !important;
    line-height: 1.35;
    text-align: center !important;
    white-space: nowrap;
    opacity: 0.9;
  }

  /* Mobile credits: centered below the poem, one line beneath the other. */
  .recital-credit-right {
    bottom: calc(2.45rem + var(--safe-bottom));
  }

  .recital-credit-left {
    bottom: calc(1.15rem + var(--safe-bottom));
  }

  .archive-viewport {
    inset: calc(4.5rem + var(--safe-top)) 0 0 !important;
  }

  .archive-world-item.kolam { width: 7rem !important; }
  .archive-world-item.book { width: 11rem !important; }

  /* Geometry: mobile becomes a clean vertical explanatory page. */
/* =========================
   GEOMETRY — MOBILE
========================= */

.geometry-view {
  overflow: hidden !important;
}

.geometry-scroll {
  inset: calc(4.5rem + var(--safe-top)) 0 0 !important;
  padding:
    0 var(--content-inline-end)
    calc(2rem + var(--safe-bottom))
    var(--content-inline-start);

  scroll-padding-top: 0;
  -webkit-overflow-scrolling: touch;
}

.geometry-panel,
.geometry-panel.is-active {
  width: 100% !important;
 
  min-height: calc(100svh - 40rem - var(--safe-top) - var(--safe-bottom));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0;
  margin: 0 !important;

  gap: 1rem !important;
  overflow: hidden !important;
  text-align: center !important;
}



/* All Geometry text */

.geometry-caption,
.geometry-grid-caption,
.geometry-panel-title,
.geometry-panel-subtitle,
.geometry-split-item .geometry-caption,
.geometry-key-label,
.geometry-key-description,
.geometry-progress-label {
  width: min(100%, 21rem) !important;
  max-width: 100% !important;

  margin-left: auto !important;
  margin-right: auto !important;

  text-align: center !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.geometry-panel > .geometry-caption,
.geometry-panel > .geometry-grid-caption,
.geometry-split-item > .geometry-caption {
  margin-bottom: 0 !important;

  font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
  line-height: 1.45 !important;

  text-align: center !important;
}


/* Visuals */

.geometry-grid-segmentation,
.geometry-walk-row,
.geometry-role-walk-row,
.geometry-repeat-field,
.geometry-kolam-preview,
.geometry-animation-button {
  flex: 0 0 auto;

  width: min(100%, 24rem) !important;
  height: auto !important;
  min-height: 17rem;

  margin-left: auto !important;
  margin-right: auto !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.geometry-grid-segmentation svg,
.geometry-walk-row svg,
.geometry-role-walk-row svg,
.geometry-repeat-field svg,
.geometry-kolam-preview svg,
.geometry-animation-button svg {
  width: 100% !important;
  height: auto !important;
  max-height: 58svh;
  display: block;
}


/* Single-grid Geometry sections */

.geometry-walk-row,
.geometry-role-walk-row {
  width: min(88vw, 24rem) !important;
  min-height: 20rem !important;
}


/* Keys and split layouts */

.geometry-shape-key {
  width: min(100%, 22rem) !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;

  gap: 1.5rem !important;
  text-align: center !important;
}

.geometry-key-group {
  width: 100% !important;
  text-align: center !important;
}

.geometry-key-icons {
  width: 100% !important;
  height: 5.25rem !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.geometry-split-grid {
  width: 100% !important;

  display: grid !important;
  grid-template-columns: 1fr !important;
  justify-items: center !important;

  gap: 3.5rem !important;
}

.geometry-split-item {
  width: min(100%, 24rem) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;
}

.geometry-progress {
  display: none !important;
}
}

@media (max-width: 30rem) {
  .name-link {
    display: none;
  }

  .nav-tools {
    left: auto;
    right: calc(0.75rem + var(--safe-right));
    transform: none;
  }

  .scene1 .grandmother,
  .scene1 .kolam-word,
  .scene2-simplest {
    font-size: clamp(2.35rem, 14vw, 3.25rem) !important;
  }

  .scene15-serif,
  .scene15-line-word {
    font-size: clamp(1.65rem, 9vw, 2.25rem) !important;
  }
}

@media (max-height: 31rem) and (orientation: landscape) {
  .scene {
    padding-top: calc(4rem + var(--safe-top));
  }

  .name-link { display: none; }

  .nav-tools {
    left: auto;
    right: calc(0.75rem + var(--safe-right));
    transform: none;
  }

  .geometry-scroll {
    inset-top: calc(4rem + var(--safe-top));
  }
}

/* iPhone portrait composition pass (reference: 402 × 874 CSS px). */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --icon-left: calc(0.8rem + var(--safe-left));
    --icon-size: 2.35rem;
    --dot-size: .3rem;
    --text-body-size-small: 1.05rem;
    --text-body-leading-small: 1.45rem;
  }

  .scene {
    padding: calc(4.8rem + var(--safe-top)) calc(1.1rem + var(--safe-right))
      calc(1.3rem + var(--safe-bottom)) calc(3.8rem + var(--safe-left));
  }

  .kolam-link {
    left: calc(1.2rem + var(--safe-left));
    top: calc(.8rem + var(--safe-top));
    width: 2.4rem;
    height: 2.4rem;
  }

  .name-link {
    top: calc(1.35rem + var(--safe-top));
    right: calc(1rem + var(--safe-right));
    font-size: .76rem;
    letter-spacing: .035em;
  }

  .scroll-dots {
    display: flex !important;
    left: calc(1.82rem + var(--safe-left));
    top: calc(4.55rem + var(--safe-top));
    height: calc(100svh - 6.25rem - var(--safe-top) - var(--safe-bottom));
    justify-content: space-between;
  }

  .scroll-dot {
    width: .3rem;
    height: .3rem;
    padding: 0;
  }

  .small-text {
    font-size: 1.03rem;
    line-height: 1.45rem;
    letter-spacing: .015em;
  }

  /* 01: four deliberate stacked lines */
  .scene-1 .title-line {
    width: 100% !important;
    min-height: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    transform: translateY(.75rem);
  }

  .scene-1 .my,
  .scene-1 .grandmother,
  .scene-1 .taught,
  .scene-1 .kolam-word {
    position: relative;
    inset: auto;
    display: block;
    width: 100%;
    text-align: center;
  }

  .scene-1 .my { margin-bottom: -.45rem; }
  .scene-1 .grandmother {
    font-size: clamp(3.45rem, 15vw, 4rem) !important;
    line-height: .92 !important;
  }
  .scene-1 .taught { margin-top: .25rem; }
  .scene-1 .kolam-word {
    margin-top: -.1rem;
    font-size: clamp(3.6rem, 15.5vw, 4.15rem) !important;
    line-height: .95 !important;
  }

  /* 02 */
  .scene-2 .scene2-title {
    width: 100% !important;
    height: auto;
    min-height: 15rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.35rem;
    transform: translateY(-.15rem);
  }
  .scene-2 .scene2-the,
  .scene-2 .scene2-simplest,
  .scene-2 .scene2-one {
    position: relative;
    inset: auto;
    width: 100%;
    text-align: center;
  }
  .scene-2 .scene2-simplest {
    font-size: clamp(3.45rem, 15vw, 4rem) !important;
    line-height: .92 !important;
  }

  /* 03 */
  .scene-3 .scene3-grid {
    width: 100% !important;
    height: min(73svh, 39rem);
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 0 !important;
    transform: translateY(.6rem);
  }
  .scene-3 .kolam-part {
    height: auto;
    justify-content: center;
  }
  .scene-3 .part-title {
    width: 100%;
    height: auto;
    margin: 0;
  }
  .scene-3 .label-small { min-height: 1.35rem; }
  .scene-3 .part-main {
    min-height: 0;
    font-size: clamp(3.25rem, 14.5vw, 3.9rem) !important;
    line-height: .95 !important;
  }
  .scene-3 .five-dots,
  .scene-3 .circle-drawing,
  .scene-3 .loop-drawing {
    position: absolute;
    width: 5.3rem;
    height: 5.3rem;
    opacity: .001;
    pointer-events: none;
  }

  /* 04 */
  .scene-4 .scene4-title {
    width: 100% !important;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .scene-4 .scene4-simple,
  .scene-4 .scene4-she,
  .scene-4 .scene4-dusting {
    position: relative;
    inset: auto;
    width: 100%;
    text-align: center;
  }
  .scene-4 .scene4-simple {
    font-size: 3.75rem;
    line-height: .95;
  }
  .scene-4 .scene4-right { display: flex; flex-direction: column; gap: .45rem; width: 100%; }

  /* 05 */
  .scene-5 .scene5-content {
    left: calc(50% + 1.25rem);
    width: calc(100% - 5.25rem);
  }
  .scene-5 .scene5-main {
    width: 100%;
    height: min(72svh, 39rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 1rem;
  }
  .scene-5 .scene5-line {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
    line-height: 1.45;
  }
  .scene-5 .scene5-options {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: 2.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.75rem;
  }
  .scene-5 .scene5-option { width: 100%; height: auto; }
  .scene-5 .scene5-serif {
    font-style: normal;
    font-size: clamp(3.35rem, 15vw, 4rem);
    line-height: .9;
  }
  .scene-5 .scene5-correction { width: 100%; height: auto; }
  .scene-5 .kolam-instance { max-width: 8.5rem; max-height: 8.5rem; }

  /* 06: poem above, generated field below */
  .scene-6 .scene6-content {
    width: calc(100% - 5.4rem);
    height: 76svh;
    left: calc(50% + 1.3rem);
  }
  .scene-6 .scene6-text { width: 100%; top: 1.5rem; }
  .scene-6 .scene6-line { margin-bottom: .8rem; white-space: normal; }
  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    margin-left: 0;
    width: 100%;
    height: 15rem;
    bottom: 1rem;
  }

  /* 07 */
  .scene-7 .scene7-text {
    left: calc(50% + 1.25rem);
    width: calc(100% - 5.5rem);
  }
  .scene-7 .scene7-fixed { margin-bottom: 2.4rem; }
  .scene-7 .scene7-fixed span { margin-bottom: .65rem; }
  .scene-7 .scene7-changing { min-height: 8rem; }
  .scene-7 .scene7-typed-line { white-space: normal; text-align: center; justify-content: center; }

  /* 08: all ten remain visible on one phone screen */
  
  
  
  
  
  

  /* 09 */
  .scene9-content {
    inset: calc(5.2rem + var(--safe-top)) calc(1rem + var(--safe-right))
      calc(1.8rem + var(--safe-bottom)) calc(4rem + var(--safe-left)) !important;
  }
  .scene9-list { gap: .65rem; }
  .scene9-row {
    grid-template-columns: 3rem minmax(0, 1fr) !important;
    column-gap: .85rem;
  }
  .scene9-svg { width: 2.65rem; height: 2.65rem; }
  .scene9-date { font-size: .52rem; margin-top: .25rem; }
  .scene9-segment { height: .09rem; }
  .scene9-dots { margin-top: .3rem; gap: .3rem; }
  .scene9-dot { width: .16rem; height: .16rem; }
  .scene9-title { margin-top: 1rem; }

  /* 10: shrink the analytical table rather than requiring sideways scrolling */
  .scene10-content {
    inset: calc(5rem + var(--safe-top)) calc(.75rem + var(--safe-right))
      calc(1.5rem + var(--safe-bottom)) calc(3.75rem + var(--safe-left)) !important;
    overflow: hidden;
  }
  .scene10-table {
    width: 100%;
    min-width: 0;
    grid-template-columns: 2rem repeat(5, minmax(0, 1fr));
    grid-template-rows: 3.2rem repeat(4, minmax(0, 1fr));
  }
  .scene10-header { gap: .12rem; }
  .scene10-header-svg, .scene10-header img { width: 1.55rem; height: 1.55rem; }
  .scene10-date { font-size: .37rem; line-height: .55rem; letter-spacing: .03em; }
  .scene10-motif { padding-right: .2rem; }
  .scene10-motif-icon { width: .9rem; height: .9rem; }
  .scene10-tallies { padding: .35rem .25rem; column-gap: .2rem; row-gap: .2rem; }
  .scene10-tally-group { gap: .05rem; }
  .scene10-tally { font-size: .48rem; }
  .scene10-title { margin-top: 1rem; }
  .scene10-title .small-text { white-space: normal; }

  /* 11 */
  .scene11-content {
    inset: calc(5rem + var(--safe-top)) calc(1rem + var(--safe-right))
      calc(1.5rem + var(--safe-bottom)) calc(4rem + var(--safe-left)) !important;
  }
  .scene11-columns { column-gap: .85rem; grid-template-columns: 1fr .03rem 1fr; }
  .scene11-category-icon { width: 1.5rem; height: 1.5rem; margin-bottom: .6rem; }
  .scene11-svg { width: 2.7rem; height: 2.7rem; }
  .scene11-date { font-size: .48rem; margin-top: .2rem; }
  .scene11-title { margin-top: 1.1rem; }
  .scene11-title .small-text { white-space: normal; }

  /* 12 */
  .scene12-content {
    inset: calc(5rem + var(--safe-top)) calc(1rem + var(--safe-right))
      calc(1.5rem + var(--safe-bottom)) calc(4rem + var(--safe-left)) !important;
  }
  .scene12-photo-field {
    max-height: none;
    overflow: visible;
    grid-template-columns: repeat(2, 5.1rem) !important;
    grid-template-rows: repeat(5, 5.1rem) !important;
    gap: .7rem 1.1rem !important;
  }
  .scene12-item { width: 5.1rem !important; }
  .scene12-title { margin-top: .9rem; }
  .scene12-title .small-text { white-space: normal; }

  /* 13 */
  .scene13-text {
    top: 20% !important;
    left: calc(50% + 1.2rem);
    width: calc(100% - 5.3rem) !important;
  }
  .scene13-typed-line { max-width: 100%; white-space: normal; text-align: center; }
  .scene13-line-sizer, .scene13-line-visible { white-space: normal; }
  .scene13-carousel {
    left: calc(50% + 1.2rem);
    top: auto !important;
    bottom: calc(10svh + var(--safe-bottom)) !important;
    width: 9.75rem !important;
  }

  /* 14 */
  .scene14-text {
    top: 23% !important;
    left: calc(50% + 1.2rem);
    width: calc(100% - 5.3rem) !important;
  }
  .scene14-typed-line,
  .scene14-line-sizer,
  .scene14-line-visible { max-width: 100%; white-space: normal; text-align: center; }
  .scene14-kolam {
    left: 3.8rem;
    width: calc(100% - 3.8rem);
    bottom: calc(9svh + var(--safe-bottom)) !important;
    height: 5.4rem;
  }

  /* 15: echo scene 03, then let the final thought unfold below */
  .scene15-fixed {
    inset: calc(5rem + var(--safe-top)) calc(1rem + var(--safe-right))
      calc(1.5rem + var(--safe-bottom)) calc(4rem + var(--safe-left)) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    gap: 2.8rem !important;
  }
  .scene15-part { height: auto; }
  .scene15-serif { font-size: clamp(3.1rem, 14vw, 3.8rem); line-height: .9; }
  .scene15-wander { min-height: 13rem; align-items: center; width: 100%; }
  .scene15-wander-line {
    height: auto;
    justify-content: center;
    flex-wrap: wrap;
    white-space: normal;
  }
  .scene15-line-word { font-size: clamp(3rem, 13.5vw, 3.7rem); }
  .scene15-changing { width: 100% !important; min-height: 7rem; align-items: center; text-align: center; }
  .type-text-scene15-changing { text-align: center; }
  .scene15-final-line { justify-content: center; white-space: normal; }

  /* Menu buttons must not cover the title while closed. */
  body:not(.menu-open) .nav-tools { display: none; }
}

/* Mobile refinement from iPhone portrait references. */
@media (max-width: 30rem) and (orientation: portrait) {
  /* Keep every poem composition centred inside the usable area to the right of the dots. */
  .scene-3 .scene3-grid,
  .scene-4 .scene4-title,
  .scene-5 .scene5-content,
  .scene-6 .scene6-content {
    left: calc(50% + 1.15rem) !important;
    width: calc(100% - 5.25rem) !important;
    transform: translate(-50%, -50%) !important;
  }

  .scene-3 .scene3-grid {
    position: absolute;
    top: 50%;
    height: min(72svh, 39rem);
  }

  .scene-3 .part-title,
  .scene-3 .label-small,
  .scene-3 .part-main,
  .scene-4 .scene4-simple,
  .scene-4 .scene4-she,
  .scene-4 .scene4-dusting,
  .scene-5 .scene5-line,
  .scene-5 .scene5-small,
  .scene-5 .scene5-serif,
  .scene-6 .scene6-line {
    text-align: center !important;
  }

  .scene-3 .part-main {
    width: 100%;
    white-space: nowrap;
    font-size: clamp(3rem, 13.4vw, 3.75rem) !important;
  }

  .scene-3 .part-line .part-main {
    font-size: clamp(2.75rem, 12.2vw, 3.5rem) !important;
  }

  .scene-4 .scene4-title {
    position: absolute;
    top: 50%;
    justify-content: center;
    gap: clamp(4.8rem, 11svh, 6.4rem);
  }

  .scene-4 .scene4-simple {
    width: 100%;
    font-size: clamp(3.55rem, 15vw, 4rem);
  }

  .scene-4 .scene4-right {
    align-items: center;
    gap: .5rem;
  }

  /* One generated kolam only, kept clear of the text. Its internal paths still draw sequentially. */
  .scene-5 .scene5-content {
    top: 46%;
  }

  .scene-5 .scene5-main {
    height: min(65svh, 35rem);
    padding-top: 0;
  }

  .scene-5 .scene5-line {
    max-width: 16rem;
    margin-inline: auto;
  }

  .scene-5 .scene5-options {
    margin-top: clamp(3.2rem, 8svh, 4.5rem);
    gap: clamp(2.25rem, 5svh, 3rem);
  }

  .scene-5 .scene5-serif {
    font-size: clamp(3.25rem, 14.6vw, 3.95rem);
  }

  .scene-5 .kolam-instance {
    max-width: none;
    max-height: none;
  }

  /* Route-to-school scene: two text zones framing a tall portrait dot field. */
  .scene-6 .scene6-content {
    top: 52%;
    height: min(80svh, 44rem);
  }

  .scene-6 .scene6-text {
    position: absolute;
    inset: 0;
    width: 100%;
    transform: none;
    pointer-events: none;
  }

  .scene-6 .scene6-line {
    position: absolute;
    left: 50%;
    width: 100%;
    max-width: 19rem;
    margin: 0;
    transform: translateX(-50%);
    white-space: normal;
    line-height: 1.45;
  }

  .scene-6 .scene6-line:nth-child(1) { top: 0; }
  .scene-6 .scene6-line:nth-child(2) { top: 2rem; }
  .scene-6 .scene6-line:nth-child(3),
  .scene-6 .scene6-line:nth-child(4) {
    top: auto;
    bottom: 0;
    min-height: 3.2rem;
  }

  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    left: 50%;
    bottom: 4.7rem;
    width: min(100%, 19rem);
    height: calc(100% - 9.3rem);
    margin: 0;
    transform: translateX(-50%);
  }

  .scene-6 .scene6-dot {
    width: .22rem;
    height: .22rem;
  }
}

/* =========================================================
   FINAL MOBILE ALIGNMENT + TYPE-SAFETY PASS
   iPhone portrait: centre everything inside the usable column
   after the progress dots, with equal visual edge margins.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --mobile-content-left: calc(4.35rem + var(--safe-left));
    --mobile-content-right: calc(1.15rem + var(--safe-right));
    --mobile-content-width: calc(100vw - var(--mobile-content-left) - var(--mobile-content-right));
    --mobile-small-text: 1.333rem; /* 16pt at a 16px root */
    --mobile-small-leading: 1.58;
  }

  /* All small poem copy uses the requested 16pt-equivalent size. */
  .small-text,
  .type-text,
  [class*="type-text-scene"],
  .label-small,
  .scene5-small {
    font-size: var(--mobile-small-text) !important;
    line-height: var(--mobile-small-leading) !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: center !important;
  }

  /* A reusable, genuinely centred mobile content column. */
  .scene-1 .title-line,
  .scene-2 .scene2-title,
  .scene-3 .scene3-grid,
  .scene-4 .scene4-title,
  .scene-5 .scene5-content,
  .scene-6 .scene6-content,
  .scene-7 .scene7-text,
  .scene-13 .scene13-text,
  .scene-14 .scene14-text {
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    width: auto !important;
    max-width: none !important;
    margin-inline: 0 !important;
  }

  /* Scenes 1–2 are vertically centred without a horizontal translate. */
  .scene-1 .title-line,
  .scene-2 .scene2-title {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) !important;
  }

  /* Scene 3: centre each phrase in the same usable column. */
  .scene-3 .scene3-grid {
    top: 50%;
    transform: translateY(-50%) !important;
  }

  .scene-3 .kolam-part,
  .scene-3 .part-title,
  .scene-3 .label-small,
  .scene-3 .part-main {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .scene-3 .part-main {
    max-width: 100%;
  }

  .scene-3 .part-line .part-main {
    white-space: normal !important;
    text-wrap: balance;
  }

  /* Scene 4: remove the slight right offset visible on phone. */
  .scene-4 .scene4-title {
    top: 50%;
    transform: translateY(-50%) !important;
  }

  .scene-4 .scene4-right,
  .scene-4 .scene4-simple,
  .scene-4 .scene4-she,
  .scene-4 .scene4-dusting {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  /* Scenes 5–6: preserve their vertical composition, only fix x alignment. */
  .scene-5 .scene5-content,
  .scene-6 .scene6-content {
    transform: translateY(-50%) !important;
  }

  .scene-5 .scene5-line,
  .scene-5 .scene5-option,
  .scene-5 .scene5-correction,
  .scene-6 .scene6-text,
  .scene-6 .scene6-line {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .scene-6 .scene6-line {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    padding-inline: .2rem;
  }

  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    left: 50% !important;
    width: min(100%, 18.5rem) !important;
    transform: translateX(-50%) !important;
  }

  /* Scene 7: text cannot extend off-screen; every line wraps and centres. */
  .scene-7 .scene7-text {
    top: 50%;
    transform: translateY(-50%) !important;
    padding-inline: .15rem;
  }

  .scene-7 .scene7-fixed,
  .scene-7 .scene7-changing,
  .scene-7 .type-text-scene7-changing,
  .scene-7 .scene7-fixed span,
  .scene-7 .scene7-typed-line,
  .scene-7 .scene7-typed-copy {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
  }

  .scene-7 .scene7-typed-line {
    display: flex;
    justify-content: center !important;
    align-items: baseline;
    flex-wrap: wrap;
    min-height: 0;
  }

  .scene-7 .scene7-real-cursor {
    flex: 0 0 auto;
  }

  /* Other centred poem text also respects the same safe width. */
  .scene-13 .scene13-text,
  .scene-14 .scene14-text {
    transform: translateX(0) !important;
  }

  .scene13-typed-line,
  .scene13-line-sizer,
  .scene13-line-visible,
  .scene14-typed-line,
  .scene14-line-sizer,
  .scene14-line-visible,
  .scene15-changing,
  .type-text-scene15-changing {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word;
    text-align: center !important;
  }
}

/* =========================================================
   SCENE 7 MOBILE: CITY-GIRL PORTRAIT GRID
   Tall regular dot field above and below a centred text gap.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  .scene-7 .scene7-dot-field,
  .scene-7 .scene7-kolam-layer {
    inset: 0 !important;
  }

  .scene-7 .scene7-text {
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    top: 50% !important;
    width: auto !important;
    padding-inline: .35rem !important;
    transform: translateY(-50%) !important;
  }

  .scene-7 .scene7-fixed {
    margin-bottom: 2rem !important;
  }

  .scene-7 .scene7-fixed span {
    margin-bottom: .18rem !important;
    line-height: 1.5 !important;
  }

  .scene-7 .scene7-changing {
    min-height: 5.3rem !important;
  }

  .scene-7 .type-text-scene7-changing,
  .scene-7 .scene7-typed-line,
  .scene-7 .scene7-typed-copy {
    line-height: 1.55 !important;
  }

  .scene-7 .scene7-dot {
    width: .21rem !important;
    height: .21rem !important;
  }
}

/* =========================================================
   FINAL IPHONE PORTRAIT TYPOGRAPHY HIERARCHY
   Mono copy = 16pt equivalent. Serif display type is sized
   independently so words remain legible without wrapping.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --mobile-mono-size: 1.333rem;
    --mobile-mono-leading: 1.48;
    --mobile-serif-xl: clamp(3rem, 12.4vw, 3.35rem);
    --mobile-serif-lg: clamp(3.15rem, 13.2vw, 3.6rem);
    --mobile-serif-md: clamp(2.9rem, 12vw, 3.3rem);
  }

  /* Only Degular Mono poem copy receives the requested 16pt size. */
  .small-text,
  .label-small,
  .scene5-small,
  .scene15-small,
  .scene15-a,
  .scene15-how-to,
  .recital-line {
    font-size: var(--mobile-mono-size) !important;
    line-height: var(--mobile-mono-leading) !important;
  }

  /* Typed wrappers inherit their actual typeface/role instead of all
     being forced to the mono size. */
  .type-text,
  [class*="type-text-scene"] {
    max-width: 100% !important;
  }

  /* Opening title: preserve the intended hierarchy and never split
     the large serif words. */
  .scene-1 .title-line {
    min-width: 0;
    align-content: center;
    row-gap: .55rem;
  }

  .scene-1 .grandmother {
    display: block !important;
    width: 100%;
    font-size: clamp(2.9rem, 11.8vw, 3.25rem) !important;
    line-height: .98 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .scene-1 .kolam-word {
    display: block !important;
    width: 100%;
    font-size: clamp(3.15rem, 13vw, 3.55rem) !important;
    line-height: .98 !important;
    white-space: nowrap !important;
    text-align: center !important;
  }

  .scene-1 .my,
  .scene-1 .taught {
    display: block !important;
    width: min(100%, 17rem);
    margin-inline: auto;
    white-space: normal !important;
    text-align: center !important;
    text-wrap: balance;
  }

  /* “the / simplest / one” */
  .scene-2 .scene2-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    height: auto;
  }

  .scene-2 .scene2-the,
  .scene-2 .scene2-one,
  .scene-2 .scene2-simplest {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    text-align: center !important;
  }

  .scene-2 .scene2-simplest {
    font-size: clamp(3.2rem, 13.5vw, 3.65rem) !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  /* Five dots / a circle / a four looped line. */
  .scene-3 .part-main {
    font-size: var(--mobile-serif-lg) !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  .scene-3 .part-line .part-main {
    font-size: clamp(2.85rem, 11.7vw, 3.2rem) !important;
    white-space: nowrap !important;
    text-wrap: nowrap;
  }

  .scene-3 .part-title {
    width: 100% !important;
    min-height: 0;
    height: auto;
    margin-bottom: .9rem;
  }

  /* “simple” was visually too small. */
  .scene-4 .scene4-simple {
    font-size: clamp(3.15rem, 13vw, 3.55rem) !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  /* Correction scene display words. */
  .scene-5 .scene5-serif {
    font-size: clamp(3.15rem, 13vw, 3.55rem) !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  /* Keep all mono narrative lines inside comfortable edge margins. */
  .scene-5 .scene5-line,
  .scene-5 .scene5-correction,
  .scene-6 .scene6-line,
  .scene-7 .scene7-fixed,
  .scene-7 .scene7-changing,
  .scene-9 .scene9-title,
  .scene-10 .scene10-title,
  .scene-11 .scene11-title,
  .scene-12 .scene12-title,
  .scene-13 .scene13-text,
  .scene-14 .scene14-text{
    box-sizing: border-box;
    padding-inline: .35rem;
  }

  /* Final callback scene uses the same serif hierarchy as scene 3. */
  .scene-15 .scene15-serif {
    font-size: var(--mobile-serif-lg) !important;
    line-height: .95 !important;
    white-space: nowrap !important;
  }

  .scene-15 .scene15-line-word {
    font-size: clamp(2.8rem, 11.5vw, 3.15rem) !important;
    line-height: .95 !important;
  }

  .scene-15 .scene15-return {
    font-size: clamp(2.8rem, 11.7vw, 3.2rem) !important;
    line-height: .9 !important;
  }
}

/* =========================================================
   FINAL MOBILE VERTICAL ALIGNMENT + SMALLER MONO TYPE
   iPhone portrait: centre each poem composition within the
   usable column to the right of the progress dots.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --mobile-mono-size: 1rem;
    --mobile-mono-leading: 1.45;
    --mobile-stage-top: calc(4.8rem + var(--safe-top));
    --mobile-stage-bottom: calc(1.4rem + var(--safe-bottom));
    --mobile-stage-height: calc(100svh - var(--mobile-stage-top) - var(--mobile-stage-bottom));
  }

  /* Degular Mono copy only. */
  .small-text,
  .label-small,
  .scene5-small,
  .scene15-small,
  .scene15-a,
  .scene15-how-to,
  .recital-line,
  .scene7-typed-copy,
  .scene13-line-visible,
  .scene14-line-visible {
    font-size: var(--mobile-mono-size) !important;
    line-height: var(--mobile-mono-leading) !important;
  }

  /* Every standalone poem composition uses the same true centre. */
  .scene-1 .title-line,
  .scene-2 .scene2-title,
  .scene-3 .scene3-grid,
  .scene-4 .scene4-title,
  .scene-5 .scene5-content,
  .scene-7 .scene7-text,
  .scene-13 .scene13-text,
  .scene-14 .scene14-text,
  .scene-15 .scene15-fixed {
    position: absolute !important;
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    box-sizing: border-box;
  }

  /* Scene 1: centre the whole four-line title as one composition. */
  .scene-1 .title-line {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem !important;
  }

  .scene-1 .my,
  .scene-1 .grandmother,
  .scene-1 .taught,
  .scene-1 .kolam-word {
    margin: 0 !important;
    text-align: center !important;
  }

  /* Scene 2: equal rhythm above and below the serif word. */
  .scene-2 .scene2-title {
    display: grid !important;
    grid-template-rows: auto auto auto;
    justify-items: center;
    align-items: center;
    row-gap: 1.35rem !important;
  }

  .scene-2 .scene2-the,
  .scene-2 .scene2-simplest,
  .scene-2 .scene2-one {
    position: static !important;
    inset: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Scene 3: keep the three phrases balanced around page centre. */
  .scene-3 .scene3-grid {
    height: min(70svh, 38rem) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(3, 1fr) !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .scene-3 .kolam-part,
  .scene-3 .part-title {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Scene 4: centre both text blocks as a single balanced unit. */
  .scene-4 .scene4-title {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.5rem !important;
  }

  .scene-4 .scene4-right {
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Scene 5: centre the text stack; keep the animated kolam below. */
  .scene-5 .scene5-content {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .scene-5 .scene5-main,
  .scene-5 .scene5-options,
  .scene-5 .scene5-option,
  .scene-5 .scene5-correction {
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Route-to-school remains deliberately split top/bottom, but both
     boxes share the same horizontal centre and edge margins. */
  .scene-6 .scene6-content {
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    width: auto !important;
  }

  .scene-6 .scene6-text,
  .scene-6 .scene6-line {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  /* City-girl text remains exactly at page centre. */
  .scene-7 .scene7-text {
    padding-inline: .45rem !important;
  }

  .scene-7 .scene7-fixed,
  .scene-7 .scene7-changing {
    margin-inline: auto !important;
    text-align: center !important;
  }

  /* Later narrative captions centre as complete text boxes. */
  .scene-9 .scene9-title,
  .scene-10 .scene10-title,
  .scene-11 .scene11-title,
  .scene-12 .scene12-title{
    width: calc(100vw - var(--mobile-content-left) - var(--mobile-content-right)) !important;
    max-width: none !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .scene-13 .scene13-text,
  .scene-14 .scene14-text {
    text-align: center !important;
  }

  .scene-15 .scene15-fixed {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem !important;
  }
}

/* Final Scene 1 mobile alignment fix: every title line shares one centre axis. */
@media (max-width: 30rem) and (orientation: portrait) {
  .scene-1 .title-line {
    position: absolute !important;
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: .5rem !important;
    text-align: center !important;
    overflow: visible !important;
  }

  .scene-1 .my,
  .scene-1 .grandmother,
  .scene-1 .taught,
  .scene-1 .kolam-word {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  .scene-1 .grandmother {
    font-size: clamp(2.7rem, 12.3vw, 3.2rem) !important;
    line-height: 1.02 !important;
    white-space: nowrap !important;
    letter-spacing: -0.025em;
  }

  .scene-1 .kolam-word {
    font-size: clamp(2.85rem, 13vw, 3.35rem) !important;
    line-height: 1.03 !important;
    white-space: nowrap !important;
  }

  .scene-1 .my,
  .scene-1 .taught {
    white-space: normal !important;
    text-wrap: balance;
  }
}

/* =========================================================
   CONSOLIDATED IPHONE PORTRAIT LAYOUT FIX — 2026-07-19
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --phone-left: calc(4.25rem + var(--safe-left));
    --phone-right: calc(1.15rem + var(--safe-right));
    --phone-width: calc(100vw - var(--phone-left) - var(--phone-right));
  }

  /* Every narrative box stays inside the usable column and wraps safely. */
  .scene :is(
    .small-text,
    .type-text,
    [class*="type-text-scene"],
    .scene7-typed-line,
    .scene13-typed-line,
    .scene14-typed-line
  ) {
    box-sizing: border-box;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal;
    text-align: center !important;
  }

  /* 1 — simplest: one centred composition, not individually offset rows. */
  .scene-2 .scene2-title {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    top: 50% !important;
    min-height: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: clamp(2.5rem, 8svh, 4.25rem) !important;
  }
  .scene-2 .scene2-title > * {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* 2 — attempts: centre the entire text + kolam stack. */
  .scene-5 .scene5-content {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }
  .scene-5 .scene5-main {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
  }
  .scene-5 .scene5-line,
  .scene-5 .scene5-options,
  .scene-5 .scene5-option {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  .scene-5 .scene5-options {
    margin-top: clamp(2.25rem, 6svh, 3.5rem) !important;
    gap: clamp(1.7rem, 4.5svh, 2.5rem) !important;
  }
  .scene-5 .scene5-bg {
    inset: auto var(--phone-right) calc(5.5svh + var(--safe-bottom)) var(--phone-left) !important;
    height: 9.5rem !important;
  }

  /* 3 — route-to-school: captions stay within margins and may wrap. */
  .scene-6 .scene6-content {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
  }
  .scene-6 .scene6-line {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    padding-inline: .25rem;
    line-height: 1.45 !important;
  }
  .scene-6 .scene6-line:nth-child(3),
  .scene-6 .scene6-line:nth-child(4) {
    bottom: .15rem !important;
  }

  /* 4 — city-girl: two separate rectangular grids with a clean full-width gap. */
  .scene-7 .scene7-text {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 4;
  }
  .scene-7 .scene7-fixed,
  .scene-7 .scene7-changing,
  .scene-7 .scene7-typed-line {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }
  .scene-7 .scene7-fixed { margin-bottom: 1.7rem !important; }
  .scene-7 .scene7-dot-field,
  .scene-7 .scene7-kolam-layer {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* 5 — archive gallery: title occupies its own row above images. */
  
  
  
  

  /* 6–7 — analytical scenes: full-width centred captions below visuals. */
  .scene-10 .scene10-content,
  .scene-11 .scene11-content,
  .scene-12 .scene12-content {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    overflow: hidden !important;
  }
  .scene-10 .scene10-title,
  .scene-11 .scene11-title,
  .scene-12 .scene12-title {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: .15rem;
    text-align: center !important;
  }
  .scene-10 .scene10-title > span,
  .scene-11 .scene11-title > span,
  .scene-12 .scene12-title > span {
    display: block;
    width: 100%;
    margin: .18rem 0;
  }
  .scene-10 .scene10-table { max-height: 68svh; }
  .scene-11 .scene11-columns { max-height: 68svh; overflow: hidden !important; }
  .scene-12 .scene12-photo-field { max-height: 68svh; }

  /* 8 — family scene: centred copy slightly above, image clearly below. */
  .scene-13 .scene13-text {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    top: 31% !important;
    transform: translateY(-50%) !important;
  }
  .scene-13 .scene13-typed-line {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: .2rem 0;
  }
  .scene-13 .scene13-line-sizer { display: none !important; }
  .scene-13 .scene13-line-visible {
    position: static !important;
    display: block !important;
    width: 100% !important;
    transform: none !important;
  }
  .scene-13 .scene13-carousel {
    left: calc(var(--phone-left) + var(--phone-width) / 2) !important;
    transform: translateX(-50%) !important;
    bottom: calc(8svh + var(--safe-bottom)) !important;
    width: min(12rem, 58vw) !important;
  }

  /* 9 — final scene: one centred column, all changing text wraps within it. */
  .scene-15 .scene15-fixed {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    inset-inline: unset !important;
    padding: 0 !important;
  }
  .scene-15 .scene15-part,
  .scene-15 .scene15-wander,
  .scene-15 .scene15-wander-line,
  .scene-15 .scene15-changing,
  .scene-15 .scene15-final-line {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .scene-15 .scene15-wander-line {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .3rem .55rem;
  }
}

/* =========================================================
   FINAL PHONE REPAIR PASS — 2026-07-19
   One stable content column, wrapping-safe captions, and
   unbroken serif display words on iPhone portrait.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --phone-left: calc(4.25rem + var(--safe-left));
    --phone-right: calc(1.15rem + var(--safe-right));
    --phone-width: calc(100vw - var(--phone-left) - var(--phone-right));
  }

  /* Never clip poem copy horizontally. */
  .scene .small-text,
  .scene [class*="type-text-scene"] {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }

  /* 1. Scene 05: same stacked language as scene 03. */
  .scene-5 .scene5-content {
    position: absolute !important;
    inset: 0 var(--phone-right) 0 var(--phone-left) !important;
    width: auto !important;
    height: 100% !important;
    transform: none !important;
  }
  .scene-5 .scene5-main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: .72fr 1fr 1fr 1fr .75fr !important;
    align-items: center !important;
    justify-items: center !important;
  }
  .scene-5 .scene5-line {
    grid-row: 1 !important;
    align-self: end !important;
    width: 100% !important;
    padding-bottom: .35rem !important;
  }
  .scene-5 .scene5-options {
    grid-row: 2 / 5 !important;
    align-self: stretch !important;
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-rows: repeat(3, 1fr) !important;
    gap: 0 !important;
  }
  .scene-5 .scene5-option {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .25rem !important;
  }
  .scene-5 .scene5-serif {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(3.15rem, 14vw, 3.8rem) !important;
    line-height: .92 !important;
  }
  .scene-5 .scene5-correction {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8.5rem !important;
    width: 100% !important;
  }
  .scene-5 .kolam-instance {
    width: min(8rem, 34vw) !important;
    height: min(8rem, 34vw) !important;
  }

  /* 2. Route scene: top and bottom copy always wraps before edges. */
  .scene-6 .scene6-content {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
  }
  .scene-6 .scene6-line {
    width: 100% !important;
    padding-inline: .2rem !important;
    line-height: 1.4 !important;
    text-wrap: balance;
  }
  .scene-6 .scene6-line:nth-child(3),
  .scene-6 .scene6-line:nth-child(4) {
    max-width: 100% !important;
    min-height: 3.6rem !important;
  }

  /* 3. City-girl grid: geometry uses the same mobile cell as dots. */
  .scene-7 .scene7-kolam-layer svg,
  .scene-7 .scene7-kolam-layer path {
    overflow: visible;
  }
  .scene-7 .scene7-text {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
  }
  .scene-7 .scene7-fixed,
  .scene-7 .scene7-changing,
  .scene-7 .scene7-typed-line {
    width: 100% !important;
    max-width: 100% !important;
  }
  .scene-7 .scene7-typed-line {
    width: 100% !important; /* overrides JS ch width on phone */
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  /* 4–7. Data scenes: graphic first, caption below, same centre axis. */
  .scene-9 .scene9-content,
  .scene-10 .scene10-content,
  .scene-11 .scene11-content,
  .scene-12 .scene12-content{
    box-sizing: border-box !important;
  }

  
  
  

  .scene-9 .scene9-content,
  .scene-10 .scene10-content,
  .scene-11 .scene11-content,
  .scene-12 .scene12-content {
    inset: calc(5rem + var(--safe-top)) var(--phone-right)
      calc(1.4rem + var(--safe-bottom)) var(--phone-left) !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  .scene-9 .scene9-list,
  .scene-10 .scene10-table,
  .scene-11 .scene11-columns,
  .scene-12 .scene12-photo-field {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .scene-9 .scene9-title,
  .scene-10 .scene10-title,
  .scene-11 .scene11-title,
  .scene-12 .scene12-title {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    margin: .75rem 0 0 !important;
    padding: 0 .25rem !important;
    text-align: center !important;
  }
  .scene-9 .scene9-title > span,
  .scene-10 .scene10-title > span,
  .scene-11 .scene11-title > span,
  .scene-12 .scene12-title > span {
    display: block !important;
    width: 100% !important;
    margin: .2rem auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
    white-space: normal !important;
    text-wrap: balance;
  }

  /* 8. Family scene: caption centred to the image beneath it. */
  .scene-13 .scene13-content {
    inset: calc(5rem + var(--safe-top)) var(--phone-right)
      calc(2rem + var(--safe-bottom)) var(--phone-left) !important;
    width: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 2.25rem !important;
  }
  .scene-13 .scene13-text {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    transform: none !important;
    text-align: center !important;
  }
  .scene-13 .scene13-typed-line {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
  .scene-13 .scene13-carousel {
    position: relative !important;
    inset: auto !important;
    width: min(13.5rem, 62vw) !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* 9. Rules scene: centred lines, wrapping-safe. */
  .scene-14 .scene14-text {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    width: auto !important;
    transform: none !important;
    text-align: center !important;
  }
  .scene-14 .scene14-typed-line {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    text-align: center !important;
  }
  .scene-14 .scene14-line-sizer { display: none !important; }
  .scene-14 .scene14-line-visible {
    position: relative !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  /* 10. Final scene mirrors scene 03: intact serif words, stacked rows. */
  .scene-15 .scene15-fixed {
    position: absolute !important;
    inset: calc(5.2rem + var(--safe-top)) var(--phone-right)
      calc(1.5rem + var(--safe-bottom)) var(--phone-left) !important;
    width: auto !important;
    height: auto !important;
    transform: none !important;
    display: grid !important;
    grid-template-rows: .9fr .9fr 1.45fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
  }
  .scene-15 .scene15-part,
  .scene-15 .scene15-wander {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .scene-15 .scene15-serif,
  .scene-15 .scene15-line-word {
    display: block !important;
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(3.15rem, 14vw, 3.8rem) !important;
    line-height: .92 !important;
    text-align: center !important;
  }
  .scene-15 .scene15-wander {
    min-height: 0 !important;
    gap: 1.35rem !important;
  }
  .scene-15 .scene15-wander-line {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .15rem !important;
    white-space: normal !important;
  }
  .scene-15 .scene15-changing {
    width: 100% !important;
    min-height: 6.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .scene-15 .scene15-final-line {
    width: 100% !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}

/* =========================================================
   FINAL IPHONE PORTRAIT CORRECTIONS — 2026-07-19
   Loaded last to remove conflicts from earlier mobile passes.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --final-mobile-left: calc(4.35rem + var(--safe-left));
    --final-mobile-right: calc(1.15rem + var(--safe-right));
    --final-mobile-width: calc(100vw - var(--final-mobile-left) - var(--final-mobile-right));
  }

  /* 1. Scene 5: same vertical rhythm as the mobile scene 3 reference. */
  .scene-5 .scene5-content {
    position: absolute !important;
    top: 50% !important;
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    width: auto !important;
    transform: translateY(-50%) !important;
  }

  .scene-5 .scene5-main {
    width: 100% !important;
    height: min(72svh, 39rem) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-rows: auto repeat(3, minmax(0, 1fr)) !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
  }

  .scene-5 .scene5-line {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 18rem !important;
    margin: 0 auto .7rem !important;
    text-align: center !important;
  }

  .scene-5 .scene5-options {
    display: contents !important;
  }

  .scene-5 .scene5-option {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  .scene-5 .scene5-small,
  .scene-5 .scene5-serif {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
  }

  .scene-5 .scene5-serif {
    font-size: clamp(3rem, 13.5vw, 3.75rem) !important;
    line-height: .92 !important;
  }

  /* 2. Correction copy centred both vertically and horizontally. */
  .scene-5 .scene5-correction {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }

  .scene-5 .scene5-no,
  .scene-5 .scene5-laughs {
    width: min(100%, 18rem) !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }

  /* 3. City-girl animation layers align exactly with the responsive grid. */
  .scene-7 .scene7-dot-field,
  .scene-7 .scene7-kolam-layer {
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    width: auto !important;
    overflow: visible !important;
  }

  .scene-7 .scene7-kolam-layer svg {
    overflow: visible !important;
  }

  /* 4. Archive copy has its own row and never overlaps the image grid. */
  

  

  

  

  /* 5. Rules scene centred horizontally as one composition. */
  .scene-14 .scene14-text {
    position: absolute !important;
    top: 48% !important;
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    width: auto !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }

  .scene-14 .type-text-scene14,
  .scene-14 .scene14-typed-line,
  .scene-14 .scene14-line-visible,
  .scene-14 .scene14-line-sizer {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: pre-line !important;
    overflow-wrap: break-word !important;
  }

  .scene-14 .scene14-kolam {
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    width: auto !important;
  }

  /* 6. Final scene repeats scene 3's vertical stack, then unfolds below. */
  .scene-15 .scene15-fixed {
    position: absolute !important;
    top: 50% !important;
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    bottom: auto !important;
    width: auto !important;
    height: min(84svh, 45rem) !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto minmax(0, 1fr) !important;
    align-content: center !important;
    justify-items: center !important;
    gap: clamp(1.35rem, 3.2svh, 2.1rem) !important;
  }

  .scene-15 .scene15-part,
  .scene-15 .scene15-wander {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .scene-15 .scene15-small,
  .scene-15 .scene15-serif,
  .scene-15 .scene15-line-word,
  .scene-15 .type-text-scene15-fixed,
  .scene-15 .type-text-scene15-changing {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .scene-15 .scene15-serif,
  .scene-15 .scene15-line-word {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(3rem, 13.5vw, 3.75rem) !important;
    line-height: .92 !important;
  }

  .scene-15 .scene15-wander-line {
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .15rem !important;
    white-space: normal !important;
  }

  .scene-15 .scene15-a {
    padding: 0 !important;
  }

  .scene-15 .scene15-changing {
    width: 100% !important;
    max-width: 19rem !important;
    min-height: 8rem !important;
    margin: .4rem auto 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
  }

  .scene-15 .type-text-scene15-changing {
    display: block !important;
    white-space: pre-line !important;
    overflow-wrap: break-word !important;
    line-height: 1.45 !important;
  }

  .scene-15 .scene15-final-line {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
  }
}

/* =========================================================
   FINAL THREE MOBILE CORRECTIONS — 2026-07-19
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* 1. Scene 5 follows the supplied vertical reference and leaves room
     for a continuously regenerating kolam at the bottom. */
  .scene-5 .scene5-content {
    top: 47% !important;
  }

  .scene-5 .scene5-main {
    height: min(67svh, 36.5rem) !important;
    grid-template-rows: auto repeat(3, minmax(0, 1fr)) !important;
  }

  .scene-5 .scene5-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* 2. Scene 8: gallery first, completed title/caption below it. */
  

  

  

  

  /* 3. Scene 14: all lines remain centred throughout typing. */
  .scene-14 .scene14-text {
    top: 48% !important;
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    width: auto !important;
    transform: translateY(-50%) !important;
    min-height: 0 !important;
  }

  .scene-14 .type-text-scene14 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 0 !important;
    text-align: center !important;
  }

  .scene-14 .scene14-typed-line {
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    width: 100% !important;
    min-height: 1.6rem !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .scene-14 .scene14-line-sizer {
    display: none !important;
  }

  .scene-14 .scene14-line-visible {
    display: inline-flex !important;
    justify-content: center !important;
    justify-self: center !important;
    width: auto !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
    white-space: pre-wrap !important;
  }

  .scene-14 .scene14-typed-copy {
    text-align: center !important;
  }

  .scene-14 .scene14-kolam {
    bottom: 10.5svh !important;
    left: calc(var(--final-mobile-left) + .25rem) !important;
    right: calc(var(--final-mobile-right) + .25rem) !important;
    width: auto !important;
    height: 5.5rem !important;
  }

  .scene-14 .scene14-svg {
    overflow: visible !important;
  }

  .scene-14 .scene14-dot {
    opacity: 0 !important;
  }

  .scene-14 .scene14-dot.show {
    opacity: 1 !important;
  }
}

/* =========================================================
   SCENE 05 MOBILE COMPOSITION FIX — 2026-07-19
   Keep the intro line visible at the top, stack the three
   phrases vertically, and reserve the bottom for one 5-dot kolam.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  .scene-5 .scene5-content {
    position: absolute !important;
    inset: 0 var(--phone-right) 0 var(--phone-left) !important;
    width: auto !important;
    height: 100% !important;
    transform: none !important;
  }

  .scene-5 .scene5-main {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .scene-5 .scene5-line {
    position: absolute !important;
    top: 12.5svh !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    transform: none !important;
    margin: 0 auto !important;
    padding: 0 .25rem !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.35 !important;
  }

  .scene-5 .scene5-options {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  .scene-5 .scene5-option {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .2rem !important;
    text-align: center !important;
  }

  .scene-5 .scene5-option:nth-child(1) { top: 24svh !important; }
  .scene-5 .scene5-option:nth-child(2) { top: 43svh !important; }
  .scene-5 .scene5-option:nth-child(3) { top: 62svh !important; }

  .scene-5 .scene5-small,
  .scene-5 .scene5-serif {
    width: 100% !important;
    margin-inline: auto !important;
    text-align: center !important;
  }

  .scene-5 .scene5-serif {
    width: max-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
  }

  .scene-5 .scene5-bg {
    position: absolute !important;
    inset: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  .scene-5 .scene5-content {
    z-index: 2 !important;
    pointer-events: none !important;
  }

  .scene-5 .kolam-instance {
    width: min(9.25rem, 38vw) !important;
    height: min(9.25rem, 38vw) !important;
  }

  .scene-5 .scene5-correction {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    text-align: center !important;
  }
}

/* Recital fixed LISTEN control + fade — mobile */
@media (max-width: 768px) {
  .recital-view.active {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
  }

  .recital-player {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    min-height: 5.5rem !important;
    padding: .7rem 0 2.35rem !important;
    z-index: 20 !important;
  }

  .recital-player::before {
    inset: 0 0 -4.25rem !important;
    background: linear-gradient(
      to bottom,
      #611d1d 0%,
      #611d1d 38%,
      rgba(97, 29, 29, .9) 55%,
      rgba(97, 29, 29, .48) 76%,
      rgba(97, 29, 29, 0) 100%
    ) !important;
  }

  .recital-lyrics {
    height: 100% !important;
    width: 100% !important;
    padding-block: 24svh 31svh !important;
    mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 100%) !important;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 89%, transparent 100%) !important;
  }
}

/* Final mobile navigation + recital refinements */
@media (max-width: 56.25rem) {
  /* Keep the homepage controls visible on mobile. */
  body:not(.menu-open) .nav-tools {
    display: flex !important;
  }
}

@media (max-width: 48rem) {
  /* Match the fade exactly to the page background before it becomes transparent. */
  .recital-player::before {
    background: linear-gradient(
      to bottom,
      var(--bg) 0%,
      var(--bg) 42%,
      color-mix(in srgb, var(--bg) 88%, transparent) 58%,
      color-mix(in srgb, var(--bg) 48%, transparent) 76%,
      transparent 100%
    ) !important;
  }

  /* More compact recital typography on phones. */
  .recital-line {
    font-size: 0.8rem !important;
    line-height: 1.42 !important;
    margin: 0.72rem 0 !important;
  }
}

/* =========================================================
   MOBILE FIXES — 2026-07-29
   Gallery dates, circular progress dots, and final-scene centring.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* Scene 08: every date sits directly below its image, regardless
     of the original HTML order. */
  

  

  

  /* Keep every side-navigation dot a true circle. */
  .scroll-dot {
    box-sizing: border-box !important;
    width: .3rem !important;
    min-width: .3rem !important;
    max-width: .3rem !important;
    height: .3rem !important;
    min-height: .3rem !important;
    max-height: .3rem !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 .3rem !important;
    padding: 0 !important;
    border-radius: 50% !important;
    transform: none;
  }

  .scroll-dot:hover {
    transform: none !important;
  }

  /* Scene 15: treat all copy as one centred composition. */
  .scene-15 .scene15-fixed {
    position: absolute !important;
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(1.5rem, 4.2svh, 2.45rem) !important;
    text-align: center !important;
  }

  .scene-15 .scene15-part,
  .scene-15 .scene15-wander,
  .scene-15 .scene15-wander-line,
  .scene-15 .scene15-changing,
  .scene-15 .scene15-final-line,
  .scene-15 .type-text-scene15-changing {
    width: 100% !important;
    margin-inline: auto !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .scene-15 .scene15-wander {
    min-height: 0 !important;
  }

  .scene-15 .scene15-wander-line {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }

  .scene-15 .scene15-changing {
    min-height: 0 !important;
    margin-top: 0 !important;
  }

  .scene-15 .scene15-final-line {
    display: flex !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
}

/* =========================================================
   FINAL MOBILE POLISH — 2026-07-31
   Listen padding, tighter archive, final cursor placement,
   and extra breathing room below the archive caption.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* 1. Keep recital copy away from the left and right edges. */
  .recital-lyrics {
    box-sizing: border-box !important;
    padding-left: max(1.75rem, env(safe-area-inset-left)) !important;
    padding-right: max(1.75rem, env(safe-area-inset-right)) !important;
  }

  .recital-line {
    width: 100% !important;
    max-width: 22rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow-wrap: break-word !important;
  }

  /* 2. Remove the excess vertical space between archive rows. */
  

  

  

  /* 3. Attach the final caret directly to “return.” rather than
     letting it become a separate flex item. */
  .scene-15 .scene15-final-line::after,
  .scene-15 .type-text-scene15-final::after {
    content: none !important;
    display: none !important;
  }

  .scene-15 .scene15-return::after {
    content: "|";
    display: inline-block;
    margin-left: .08em;
    font-family: var(--serif);
    font-size: .8em;
    line-height: 1;
    opacity: 0;
    transform: translateY(-.02em);
  }

  .scene-15 .scene15-final-line.is-typing .scene15-return::after,
  .scene-15 .scene15-final-line.cursor-end .scene15-return::after {
    opacity: 1;
    animation: blink .85s steps(1) infinite;
  }

  /* 4. Lift the archive caption away from the bottom edge. */
  

  
}


/* =========================================================
   FINAL MOBILE LAYOUT / TYPEWRITER FIX — 2026-08-10
   These rules intentionally sit last so older mobile passes cannot
   reintroduce the spacing, cursor, crop or SVG distortion issues.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* Top-left kolam and progress rail share the exact same centre line. */
  .kolam-link {
    left: var(--icon-left) !important;
    width: var(--icon-size) !important;
    height: var(--icon-size) !important;
  }

  .scroll-dots {
    left: calc(var(--icon-left) + (var(--icon-size) / 2) - (var(--dot-size) / 2)) !important;
  }

  .scroll-dot {
    width: var(--dot-size) !important;
    height: var(--dot-size) !important;
    min-width: var(--dot-size) !important;
    min-height: var(--dot-size) !important;
    max-width: var(--dot-size) !important;
    max-height: var(--dot-size) !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 var(--dot-size) !important;
    border-radius: 50% !important;
  }

  /* Keep typed sentences on their final line layout from the first letter.
     Disabling balance prevents already-typed words from jumping lines later. */
  .small-text.typing-stable,
  [class*="type-text"].typing-stable {
    text-wrap: wrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .small-text.is-typing::after,
  .small-text.cursor-end::after,
  [class*="type-text"].is-typing::after,
  [class*="type-text"].cursor-end::after {
    position: static !important;
    float: none !important;
    vertical-align: baseline !important;
  }

  /* Scene 6: reserve a clean band above and below the dot field. */
  .scene-6 .scene6-content {
    top: 51% !important;
    height: min(82svh, 45rem) !important;
  }

  .scene-6 .scene6-line:nth-child(1) { top: 0 !important; }
  .scene-6 .scene6-line:nth-child(2) { top: 2.75rem !important; }
  .scene-6 .scene6-line:nth-child(3) {
    top: auto !important;
    bottom: 2.65rem !important;
  }
  .scene-6 .scene6-line:nth-child(4) {
    top: auto !important;
    bottom: 0 !important;
  }

  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    top: 8.75rem !important;
    bottom: 8.1rem !important;
    height: auto !important;
    width: min(100%, 18.5rem) !important;
  }

  /* Scene 7 uses a real inline cursor. Keep each completed line width
     reserved and type from that fixed left edge, as on desktop. */
  .scene-7 .scene7-typed-line {
    width: max-content !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    text-align: left !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
  }

  .scene-7 .scene7-real-cursor {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Scene 8: fit all ten images + dates without cropping the last row. */
  

  

  

  

  

  /* Scene 14: SVG now preserves its aspect ratio; keep the motif compact. */
  .scene-14 .scene14-kolam {
    height: 3.8rem !important;
  }

  .scene-14 .scene14-svg {
    width: 100% !important;
    height: 100% !important;
  }

  /* Geometry captions 04 onward stay before their corresponding graphics. */
  .geometry-panel-split .geometry-split-item,
  .geometry-panel-animation,
  .geometry-panel-repeat {
    display: flex !important;
    flex-direction: column !important;
  }

  .geometry-panel-split .geometry-caption,
  .geometry-panel-animation > .geometry-caption,
  .geometry-panel-repeat > .geometry-caption {
    order: -1 !important;
  }
}

/* Desktop/tablet nav alignment too: one shared x-axis for icon + dots. */
@media (min-width: 30.001rem) {
  .kolam-link {
    left: var(--icon-left);
    width: var(--icon-size);
    height: var(--icon-size);
  }
}

/* =========================================================
   SCENE 13 MOBILE WIDTH REPAIR — 2026-08-10
   Keep the family-scene copy in the full mobile content column.
   This overrides older shrink-to-fit/flex rules that could collapse
   the typed paragraph to a one-word-wide column on iOS.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  .scene-13 .scene13-content {
    box-sizing: border-box !important;
    width: var(--phone-width) !important;
    min-width: var(--phone-width) !important;
    max-width: var(--phone-width) !important;
  }

  .scene-13 .scene13-text,
  .scene-13 .type-text-scene13 {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .scene-13 .type-text-scene13 {
    align-items: stretch !important;
  }

  .scene-13 .scene13-typed-line {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .scene-13 .scene13-line-sizer {
    display: none !important;
  }

  .scene-13 .scene13-line-visible {
    position: static !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center !important;
  }

  .scene-13 .scene13-typed-copy {
    display: inline !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
}

/* =========================================================
   SCENE 14 MOBILE RECOMPOSITION — 2026-08-10
   Reference layout: first stanza above a tall grid, second stanza below.
   Desktop is untouched.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  .scene-14 .scene14-content {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .scene-14 .scene14-text {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .scene-14 .type-text-scene14 {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  .scene-14 .scene14-typed-line {
    position: absolute !important;
    left: var(--final-mobile-left) !important;
    right: var(--final-mobile-right) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    width: auto !important;
    min-height: 1.45em !important;
    margin: 0 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .scene-14 .scene14-typed-line:nth-child(1) { top: 14.5svh !important; }
  .scene-14 .scene14-typed-line:nth-child(2) { top: 18.2svh !important; }
  .scene-14 .scene14-typed-line:nth-child(3) { top: 21.9svh !important; }
  .scene-14 .scene14-typed-line:nth-child(4) { display: none !important; }
  .scene-14 .scene14-typed-line:nth-child(5) { top: 75.0svh !important; }
  .scene-14 .scene14-typed-line:nth-child(6) { top: 79.1svh !important; }

  .scene-14 .scene14-line-sizer {
    display: none !important;
  }

  .scene-14 .scene14-line-visible {
    position: static !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: baseline !important;
    width: auto !important;
    max-width: min(25rem, calc(100vw - var(--final-mobile-left) - var(--final-mobile-right))) !important;
    margin: 0 auto !important;
    white-space: normal !important;
    text-align: center !important;
  }

  .scene-14 .scene14-typed-copy {
    white-space: normal !important;
    text-align: center !important;
  }

  .scene-14 .scene14-kolam {
    position: absolute !important;
    top: 30.5svh !important;
    bottom: auto !important;
    left: calc(var(--final-mobile-left) + .25rem) !important;
    right: calc(var(--final-mobile-right) + .25rem) !important;
    width: auto !important;
    height: 39svh !important;
    overflow: visible !important;
  }

  .scene-14 .scene14-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  .scene-14 .scene14-path {
    stroke-width: 1.35 !important;
    vector-effect: non-scaling-stroke !important;
  }

  .scene-14 .scene14-dot {
    opacity: 0 !important;
  }

  .scene-14 .scene14-dot.show {
    opacity: 1 !important;
  }
}


/* FINAL Scene 7 mobile caret fix: caret stays immediately after the last typed glyph. */
@media (max-width: 30rem) and (orientation: portrait) {
  .scene-7 .scene7-real-cursor {
    display: none !important;
  }

  .scene-7 .scene7-typed-copy.scene7-cursor-active::after {
    content: "|" !important;
    display: inline !important;
    margin-left: .08em !important;
    white-space: nowrap !important;
    animation: blink .85s steps(1) infinite !important;
  }
}

/* =========================================================
   FINAL REQUESTED PHONE FIXES — 2026-08-14
   Single last-pass overrides for Scenes 3, 6, 8 and 14.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* Scene 3 — real auto-layout: each label stays attached to its drawing. */
  .scene-3 .scene3-grid {
    position: absolute !important;
    left: var(--mobile-content-left) !important;
    right: var(--mobile-content-right) !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100svh - 10rem) !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: clamp(1.35rem, 3.4svh, 2rem) !important;
  }

  .scene-3 .kolam-part {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    gap: .65rem !important;
  }

  .scene-3 .part-title {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }

  .scene-3 .five-dots,
  .scene-3 .circle-drawing {
    position: relative !important;
    inset: auto !important;
    opacity: 1 !important;
    width: 4.6rem !important;
    height: 4.6rem !important;
  }

  .scene-3 .loop-drawing {
    position: relative !important;
    inset: auto !important;
    width: 5.6rem !important;
    height: 5.6rem !important;
    opacity: 0 !important;
  }

  .scene-3 .loop-drawing.loop-ready {
    opacity: 1 !important;
  }

  /* Scene 6 — five-row auto-layout. Every adjacent gap uses the same token,
     so line 1↔2 equals line 3↔4 and text↔grid spacing is symmetrical. */
  .scene-6 .scene6-content {
    position: absolute !important;
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100svh - 9.25rem) !important;
    transform: translateY(-50%) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: max-content max-content minmax(13rem, 38svh) max-content max-content !important;
    row-gap: clamp(.75rem, 1.8svh, 1rem) !important;
    align-items: center !important;
  }

  .scene-6 .scene6-text {
    display: contents !important;
  }

  .scene-6 .scene6-line {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding-inline: .2rem !important;
    transform: none !important;
    text-align: center !important;
  }

  .scene-6 .scene6-line:nth-child(1) { grid-row: 1 !important; }
  .scene-6 .scene6-line:nth-child(2) { grid-row: 2 !important; }
  .scene-6 .scene6-line:nth-child(3) { grid-row: 4 !important; }
  .scene-6 .scene6-line:nth-child(4) { grid-row: 5 !important; }

  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    position: relative !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    inset: auto !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 13rem !important;
    margin: 0 !important;
  }

  .scene-6 .scene6-kolam-layer {
    z-index: 2 !important;
    align-self: stretch !important;
  }

  /* Scene 8 — caption gets the same full text column as other frames. */
  

  

  /* Scene 14 — keep logical rows single-line on phone so the absolute stanza
     rows cannot wrap into, and overlap, the following row. */
  .scene-14 .scene14-typed-line {
    left: 1rem !important;
    right: 1rem !important;
  }

  .scene-14 .scene14-line-visible,
  .scene-14 .scene14-typed-copy {
    max-width: none !important;
    white-space: nowrap !important;
    text-wrap: nowrap !important;
    font-size: clamp(.88rem, 3.75vw, .98rem) !important;
    line-height: 1.35 !important;
  }
}

/* =========================================================
   PHONE SPACING / CENTRING POLISH — 2026-08-14 v2
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* Scene 3: a little more air between each word group and its drawing,
     while keeping the whole stack vertically balanced. */
  .scene-3 .scene3-grid {
    gap: clamp(1.55rem, 4svh, 2.25rem) !important;
  }

  .scene-3 .kolam-part {
    gap: clamp(.9rem, 2.2svh, 1.15rem) !important;
  }

  /* Scene 6: centre the graphic area on the viewport rather than on the
     asymmetrical progress-dot safe area. Text remains centred too. */
  .scene-6 .scene6-content {
    left: 50% !important;
    right: auto !important;
    width: min(27rem, calc(100vw - 3.2rem)) !important;
    transform: translate(-50%, -50%) !important;
    grid-template-rows: max-content max-content minmax(13rem, 36svh) max-content max-content !important;
    row-gap: clamp(.7rem, 1.65svh, .95rem) !important;
  }

  /* Keep the two text-to-grid gaps equal, but visibly larger than the gap
     between the two lines within each text pair. */
  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    margin-block: clamp(.7rem, 1.8svh, 1rem) !important;
  }

  .scene-6 .scene6-line {
    padding-inline: .7rem !important;
  }

  /* Scene 8: caption stays centre aligned, but gets a substantially wider
     measure so it reads like the other image/text frames instead of a narrow column. */
  

  
}

/* =========================================================
   MOBILE AXIS / VERTICAL GROUP CENTRING — 2026-08-15
   Scenes 6 + 14 share one content axis to the right of the progress dots.
   The complete text / kolam / text composition is centred as a group.
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  /* Scene 6: one shared content column. Do not centre the graphic against
     the full viewport because that gives it a different x-axis from copy. */
  .scene-6 .scene6-content {
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    top: 50% !important;
    width: auto !important;
    height: auto !important;
    max-height: none !important;
    transform: translateY(-50%) !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: max-content max-content minmax(12.75rem, 34svh) max-content max-content !important;
    row-gap: clamp(.85rem, 2svh, 1.15rem) !important;
    align-items: center !important;
    justify-items: center !important;
  }

  .scene-6 .scene6-line {
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: .25rem !important;
    text-align: center !important;
    justify-self: center !important;
  }

  .scene-6 .scene6-dot-field,
  .scene-6 .scene6-kolam-layer {
    box-sizing: border-box !important;
    grid-column: 1 !important;
    grid-row: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 12.75rem !important;
    margin: clamp(.7rem, 1.7svh, 1rem) 0 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    transform: none !important;
  }

  .scene-6 .scene6-kolam-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  /* Scene 14: use exactly the same available horizontal column and keep the
     whole first-stanza / kolam / second-stanza block centred around 50svh. */
  .scene-14 .scene14-content {
    position: absolute !important;
    left: var(--phone-left) !important;
    right: var(--phone-right) !important;
    top: 50% !important;
    bottom: auto !important;
    width: auto !important;
    height: min(44rem, 78svh) !important;
    transform: translateY(-50%) !important;
  }

  .scene-14 .scene14-text,
  .scene-14 .type-text-scene14 {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .scene-14 .scene14-typed-line {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Positions are relative to the centred composition rather than viewport. */
  .scene-14 .scene14-typed-line:nth-child(1) { top: 0 !important; }
  .scene-14 .scene14-typed-line:nth-child(2) { top: 2.65rem !important; }
  .scene-14 .scene14-typed-line:nth-child(3) { top: 5.3rem !important; }
  .scene-14 .scene14-typed-line:nth-child(4) { display: none !important; }
  .scene-14 .scene14-typed-line:nth-child(5) { top: auto !important; bottom: 2.65rem !important; }
  .scene-14 .scene14-typed-line:nth-child(6) { top: auto !important; bottom: 0 !important; }

  .scene-14 .scene14-line-visible,
  .scene-14 .scene14-typed-copy {
    max-width: 100% !important;
    text-align: center !important;
  }

  .scene-14 .scene14-kolam {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 50% !important;
    bottom: auto !important;
    width: 100% !important;
    height: min(22rem, 39svh) !important;
    transform: translateY(-50%) !important;
    overflow: visible !important;
  }

  .scene-14 .scene14-svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }
}

/* =========================================================
   SCENE 08 — MOBILE: SINGLE SOURCE OF TRUTH
   ---------------------------------------------------------
   Change ONLY the variables below for Scene 8 phone spacing.

   --scene8-mobile-column-gap  = gap BETWEEN the 2 image columns
   --scene8-mobile-row-gap     = gap BETWEEN image rows
   --scene8-mobile-photo-size  = mobile image size
   --scene8-mobile-caption-width = caption/text box width
========================================================= */
@media (max-width: 30rem) and (orientation: portrait) {
  :root {
    --scene8-mobile-photo-size: min(4.2rem, 19.5vw);
    --scene8-mobile-column-gap: 0.75rem;
    --scene8-mobile-row-gap: 0.55rem;
    --scene8-mobile-caption-width: min(24rem, calc(100vw - 6rem));
  }

  .scene-8 {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100svh !important;
    padding:
      calc(4.9rem + var(--safe-top))
      var(--final-mobile-right)
      calc(2.25rem + var(--safe-bottom))
      var(--final-mobile-left) !important;

    display: grid !important;
    grid-template-rows: minmax(0, 1fr) auto !important;
    align-content: center !important;
    justify-items: center !important;
    row-gap: 0.85rem !important;
  }

  /* IMAGE GRID — control horizontal spacing with --scene8-mobile-column-gap above. */
  .scene-8 .scene8-gallery {
    grid-row: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;

    display: grid !important;
    grid-template-columns: repeat(2, var(--scene8-mobile-photo-size)) !important;
    grid-auto-rows: max-content !important;
    justify-content: center !important;
    align-content: center !important;
    column-gap: var(--scene8-mobile-column-gap) !important;
    row-gap: var(--scene8-mobile-row-gap) !important;
    scrollbar-width: none;
  }

  .scene-8 .scene8-gallery::-webkit-scrollbar {
    display: none;
  }

  .scene-8 .scene8-item {
    width: var(--scene8-mobile-photo-size) !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .scene-8 .scene8-photo {
    order: 1 !important;
    flex: 0 0 auto !important;
    width: var(--scene8-mobile-photo-size) !important;
  }

  .scene-8 .scene8-date,
  .scene-8 .scene8-item:nth-child(n+6) .scene8-date {
    order: 2 !important;
    width: 100% !important;
    margin: 0.22rem 0 0 !important;
    font-size: 0.5rem !important;
    line-height: 0.7rem !important;
    text-align: center !important;
  }

  /* CAPTION — independent of image column spacing. */
  .scene-8 .scene8-title {
    grid-row: 2 !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: var(--scene8-mobile-caption-width) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 3.7rem !important;
    margin: 0 auto !important;
    padding: 0 0.2rem !important;
    text-align: center !important;
  }

  .scene-8 .type-text-scene8,
  .scene-8 .scene8-title .small-text {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    text-align: center !important;
    line-height: 1.45 !important;
  }
}