/* =========================================================
   GEOMETRY VIEW — FINAL LONG-PAGE LAYOUT
   ========================================================= */

   .geometry-view {
    position: absolute;
    inset: 0;
    display: none;
    color: var(--cream);
    background: var(--bg);
    overflow: hidden;
  }

.geometry-view.active {
    display: block;
    overscroll-behavior: contain;
    touch-action: pan-y;
  }

.geometry-scroll {
    position: absolute;
    inset: 5.2rem 0 0 5.4rem;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
  }

.geometry-scroll::-webkit-scrollbar {
    display: none;
  }

.geometry-panel,
.geometry-panel.is-active {
    position: relative;
    width: 100%;
    min-height: calc(100vh - 5.2rem);
    height: auto;
    margin: 0;
    padding: clamp(3.5rem, 7vh, 6rem) clamp(3rem, 8vw, 9rem);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(1.5rem, 3vh, 2.5rem);

    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    overflow: visible;
    text-align: center;
  }

.geometry-caption,
.geometry-grid-caption {
  max-width: 50vw;

    width: min(72rem, calc(100% - 2rem));
    margin: 0 auto clamp(1.5rem, 3vh, 2.5rem);
    color: var(--yellow);
    font: 300 clamp(.75rem, 1.05vw, .95rem)/1.45 var(--mono);
    letter-spacing: .055em;
    text-align: center;
  }

.geometry-caption span,
.geometry-grid-caption span {
    margin-right: .45rem;
  }

.geometry-visual,
.geometry-kolam-preview,
.geometry-animated-kolam,
.geometry-repeat-field,
.geometry-walk-row,
.geometry-role-walk-row {
    width: 100%;
  }

.geometry-visual svg,
.geometry-kolam-preview svg,
.geometry-animated-kolam svg,
.geometry-repeat-field svg,
.geometry-walk-row svg,
.geometry-role-walk-row svg,
.geometry-key-icons svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

  body.geometry-open .scroll-dots {
    opacity: 0;
    pointer-events: none;
  }



  /* =========================================================
     PROGRESS DOTS
     ========================================================= */

.geometry-progress {
    position: absolute;
    left: calc(var(--icon-left) + (var(--icon-size) / 2) - .125rem);
    top: 6.9rem;
    bottom: 3.4rem;
    z-index: 3;
    width: .25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    pointer-events: auto;
  }

.geometry-progress button {
    width: .25rem;
    height: .25rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(236, 218, 180, .22);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
  }

.geometry-progress button.active,
.geometry-progress button.passed,
.geometry-progress button:hover {
    background: var(--cream);
  }

.geometry-progress button:hover {
    transform: scale(1.45);
  }


  /* =========================================================
     SHARED SVG STYLES
     ========================================================= */

.geometry-dot {
    fill: var(--cream);
  }

.geometry-dot-muted {
    fill: rgba(236, 218, 180, .22);
  }

.geometry-segment {
    fill: rgba(160, 84, 34, .76);
    transition: opacity .35s ease, transform .35s ease;
    transform-box: fill-box;
    transform-origin: center;
  }

.geometry-segment:nth-of-type(3n + 2) {
    fill: rgba(184, 101, 40, .68);
  }

.geometry-segment:hover {
    opacity: .88;
    transform: scale(1.025);
  }

.geometry-kolam-line {
    fill: none;
    stroke: var(--cream);
    stroke-width: 2.25;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

.geometry-kolam-dot {
    fill: rgba(236, 218, 180, .62);
  }

.geometry-base-grid,
.geometry-segment-map,
.geometry-walks-svg,
.geometry-generated-kolam,
.geometry-repeat-svg,
.geometry-grid-segmentation-svg {
    overflow: visible;
  }


  /* =========================================================
     STEP 01 — RHOMBUS SEGMENTATION
     ========================================================= */

.geometry-panel-grid {
      justify-content: center;
      gap: 2rem;
    }

    .geometry-panel-grid .geometry-grid-caption,
    .geometry-panel-grid .geometry-caption {
      order: -1;
      margin: 0 auto clamp(1rem, 2vh, 1.6rem);
      text-align: center;
      margin-top: 8rem;
    }

    .geometry-panel-grid .geometry-grid-segmentation {
      order: 0;
    }

.geometry-grid-segmentation {
    width: min(74rem, 92vw);
    height: min(69vh, 42rem);
  }

.geometry-grid-segmentation-svg {
    overflow: hidden;
  }

.geometry-grid-animated-dot {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.35);
  }

.geometry-rhombus-line {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-dasharray: var(--segment-length, 100);
    stroke-dashoffset: var(--segment-length, 100);
    vector-effect: non-scaling-stroke;
  }

.geometry-rhombus-fill {
    opacity: 0;
    fill: rgba(243, 189, 51, .07);
  }

.geometry-rhombus-fill.size-2 { fill: rgba(243, 189, 51, .085); }
.geometry-rhombus-fill.size-3 { fill: rgba(243, 189, 51, .105); }
.geometry-rhombus-fill.size-4 { fill: rgba(243, 189, 51, .125); }

.geometry-grid-segmentation.is-playing .geometry-grid-animated-dot {
    animation: geometryDotIn 360ms ease forwards;
    animation-delay: var(--dot-delay, 0ms);
  }

.geometry-grid-segmentation.is-playing .geometry-rhombus-line {
    animation: geometrySegmentDraw 460ms ease-out forwards;
    animation-delay: var(--line-delay, 1000ms);
  }

.geometry-grid-segmentation.is-playing .geometry-rhombus-fill {
    animation: geometryRhombusFill 720ms ease forwards;
    animation-delay: var(--fill-delay, 2400ms);
  }

.geometry-grid-caption {
    opacity: 0;
    transform: translateY(.35rem);
    max-width: 50vw;
  }

.geometry-grid-caption.is-playing {
    animation: geometryCaptionIn 600ms 520ms ease forwards;
  }

  @keyframes geometryDotIn {
    to { opacity: 1; transform: scale(1); }
  }

  @keyframes geometrySegmentDraw {
    to { stroke-dashoffset: 0; }
  }

  @keyframes geometryRhombusFill {
    to { opacity: 1; }
  }

  @keyframes geometryCaptionIn {
    to { opacity: 1; transform: translateY(0); }
  }


  /* =========================================================
     STEP 02 — ONE LARGE RANDOM WALK GRID
     ========================================================= */

.geometry-panel-path {
    justify-content: flex-start;
    align-items: center;
    padding-top: clamp(2.25rem, 5vh, 4.5rem);
    gap: clamp(.8rem, 2vh, 1.4rem);
  }

.geometry-panel-path .geometry-caption {
  max-width: 50vw;

    width: min(70rem, 88vw);
    margin: 3rem auto;
    text-align: center;
  }

.geometry-panel-path .geometry-walk-row {
    flex: 1 1 auto;
    width: min(52rem, 68vw);
    height: min(66vh, 40rem);
    min-height: 28rem;
    margin: 0 auto;
    display: grid;
    place-items: center;
    cursor: default;
  }

.geometry-walk-grid-dot {
    fill: rgba(236, 218, 180, .12);
    transition: fill 180ms ease, opacity 180ms ease, r 180ms ease;
  }

.geometry-walk-grid-dot.is-neighbour {
    fill: rgba(236, 218, 180, .78);
    opacity: 1;
  }

.geometry-walk-grid-dot.is-chosen,
.geometry-walk-grid-dot.is-current {
    fill: var(--yellow);
    opacity: 1;
  }

.geometry-walk-grid-dot.is-current {
    r: 6px;
  }

.geometry-walk-line,
.geometry-random-path {
    fill: none;
    stroke: var(--yellow);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }


/* =========================================================
   STEP 03 — ROLE LABELS AND SHAPE KEY
   ========================================================= */

.geometry-panel-shapes {
  min-height: 120vh;
  justify-content: flex-start;
  align-items: center;
  padding-top: clamp(2.25rem, 5vh, 4.5rem);
  padding-bottom: clamp(4rem, 8vh, 7rem);
  gap: clamp(.8rem, 2vh, 1.4rem);
}


  /* Caption */

.geometry-panel-shapes > .geometry-caption {
    flex: 0 0 auto;
    max-width: 50vw;

    width: min(70rem, 88vw);
    margin: 0 auto;
    text-align: center;
  }


  /* Main labelled walk */

.geometry-role-walk-row {
  flex: 0 0 auto;
  width: min(44rem, 58vw);
  height: min(44vh, 27rem);
  min-height: 22rem;
  margin: 5rem auto;

    display: grid;
    place-items: center;
  }

.geometry-role-walk-row svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
  }

.geometry-role-grid-dot {
    fill: rgba(236, 218, 180, 0.12);
  }

.geometry-role-path {
    fill: none;
    stroke: rgba(243, 189, 51, 0.28);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }


  /* S / M / C labels on the walk */

.geometry-role-letter {
    fill: var(--cream);
    font: 500 30px/1 var(--mono);

    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.5);

    transition:
      opacity 0.28s ease,
      transform 0.28s ease;
  }

.geometry-role-letter.is-visible {
    opacity: 1;
    transform: scale(1);
  }

.geometry-role-letter.role-s {
    fill: var(--yellow);
  }

.geometry-role-letter.role-m {
    fill: rgba(236, 218, 180, 0.9);
  }

.geometry-role-letter.role-c {
    fill: var(--cream);
  }


  /* Shape key */

.geometry-role-key {
    flex: 0 0 auto;
    width: min(58rem, 78vw);
    margin: 10rem auto 0;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    justify-items: stretch;

    gap: clamp(3rem, 7vw, 8rem);
  }

.geometry-role-key-item {
    min-width: 0;

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

    gap: 0.8rem;
    text-align: center;
  }

.geometry-role-key-visual {
    width: 100%;
    height: clamp(5.5rem, 10vh, 8rem);

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

.geometry-role-key-visual img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
  }


  /* Key labels */

.geometry-role-key-label {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.45rem;

    color: rgba(236, 218, 180, 0.7);
    font: 400 1rem/1.2 var(--mono);
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }

.geometry-role-key-label b {
    color: var(--yellow);
    font-weight: 500;
  }

.geometry-role-key-label span {
    color: rgba(236, 218, 180, 0.7);
  }


  /* Hide the older generated shape-key layout, if it still exists */

.geometry-panel-shapes .geometry-shape-key,
.geometry-panel-shapes .geometry-role-legend {
    display: none !important;
  }

  /* =========================================================
     STEPS 05–06 — GENERATED SEGMENTS / PASSES
     ========================================================= */

.geometry-panel-split {
    padding-inline: clamp(2rem, 5vw, 6rem);
  }

.geometry-split-grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 5vw, 6rem);
    align-items: center;
  }

.geometry-split-item {
    min-width: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1.3rem;
    justify-items: center;
  }

.geometry-split-item > .geometry-caption {
    width: auto;
    max-width: 30vw;

    margin: 0 0 1rem;
    text-align: center;
  }

.geometry-kolam-preview {
    width: min(42vw, 39rem);
    height: min(66vh, 38rem);
  }

  #geometryTiledKolam .geometry-kolam-line {
    opacity: 0;
  }

.geometry-kolam-split .geometry-forward,
.geometry-kolam-split .geometry-backward {
    stroke: var(--cream);
  }


  /* =========================================================
     STEP 07 — FINAL TRAVERSAL ANIMATION
     ========================================================= */

.geometry-panel-animation {
    gap: 1.25rem;
  }

.geometry-animation-button {
    width: min(43rem, 70vw);
    height: min(69vh, 40rem);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
  }

.geometry-animated-kolam {
    height: 100%;
  }

.geometry-animated-kolam .geometry-kolam-line {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
  }

  /* JS controls the path sequence. */
.geometry-animated-kolam.is-playing .geometry-kolam-line,
.geometry-animated-kolam.is-playing .geometry-forward,
.geometry-animated-kolam.is-playing .geometry-backward {
    animation: none !important;
  }

.geometry-hint {

    color: rgba(236, 218, 180, .45);
    font: 300 .65rem/1.3 var(--mono);
    letter-spacing: .08em;
    text-transform: lowercase;
  }


  /* =========================================================
     STEP 08 — REPEATED FIELD
     ========================================================= */

.geometry-panel-repeat {
    justify-content: flex-start;
    padding: clamp(2rem, 4vh, 3.5rem) 0 1.5rem;
    gap: .8rem;
  }

.geometry-panel-repeat .geometry-caption {
  max-width: 50vw;

    position: relative;
    z-index: 2;
    flex: 0 0 auto;
  }

.geometry-repeat-field {
    width: 100%;
    max-width: none;
    height: min(78vh, 46rem);
    overflow: hidden;
  }

.geometry-repeat-svg,
.geometry-global-field {
    width: 100%;
    height: 100%;
    overflow: hidden !important;
  }

.geometry-repeat-group {
    opacity: .94;
    cursor: pointer;
    pointer-events: all;
    outline: none;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity .25s ease, transform .25s ease;
  }

.geometry-repeat-group:hover,
.geometry-repeat-group:focus-visible {
    opacity: 1;
    transform: scale(1.035);
  }

.geometry-repeat-group .geometry-kolam-line {
    stroke-width: 2.4;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }

.geometry-repeat-group .geometry-kolam-dot {
    opacity: .45;
    pointer-events: none;
  }

.geometry-global-dot {
    fill: rgba(236, 218, 180, .36);
  }

.geometry-global-region {
    cursor: pointer;
    pointer-events: all;
  }

.geometry-global-region:focus {
    outline: none;
  }

.geometry-global-hit-area {
    fill: transparent;
    stroke: none;
    pointer-events: all;
  }

.geometry-global-region .geometry-kolam-line {
    stroke-width: 2.05;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }

.geometry-global-region-boundary {
    fill: none;
    stroke: rgba(243, 189, 51, .12);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
  }

.geometry-global-region:hover .geometry-global-region-boundary,
.geometry-global-region:focus .geometry-global-region-boundary {
    stroke: rgba(243, 189, 51, .28);
  }


/* =========================================================
   MOBILE
   ========================================================= */

   @media (max-width: 56.25rem) {
    .geometry-scroll {
      inset: 4.8rem 0 0 3.3rem;
    }
  
    .geometry-panel,
    .geometry-panel.is-active {
      min-height: auto;
      padding: 3rem 1.25rem;
      gap: 1.25rem;
      text-align: center;
    }
  
    .geometry-caption,
    .geometry-grid-caption,
    .geometry-panel-path .geometry-caption,
    .geometry-panel-shapes > .geometry-caption,
    .geometry-split-item > .geometry-caption {
      width: min(100%, 22rem);
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      white-space: normal;
    }
  
    .geometry-progress {
      top: 6.2rem;
      bottom: 2.5rem;
    }
  
  
    /* Step 01 */
  
    .geometry-panel-grid {
      justify-content: flex-start;
      gap: 1.25rem;
      padding-top: 2.5rem;
      padding-bottom: 3rem;
    }
  
    .geometry-panel-grid .geometry-grid-caption,
    .geometry-panel-grid .geometry-caption {
      margin-bottom: 1.25rem;
    }
  
    .geometry-grid-segmentation {
      width: min(94vw, 34rem);
      height: 56vh;
      min-height: 24rem;
    }
  
  
    /* Step 02 */
  
    .geometry-panel-path {
      padding-top: 2.5rem;
      padding-bottom: 3rem;
    }
  
    .geometry-panel-path .geometry-walk-row {
      width: min(88vw, 34rem);
      height: min(58vh, 31rem);
      min-height: 22rem;
      margin: 0 auto;
    }
  
  
    /* Step 03 */
  
    .geometry-panel-shapes {
      min-height: auto;
      padding: 2.5rem 1.25rem 4rem;
      gap: 1.25rem;
    }
  
    .geometry-role-walk-row {
      flex: 0 0 auto;
      width: min(86vw, 30rem);
      height: min(44svh, 25rem);
      min-height: 19rem;
      margin: 0 auto;
    }
  
    .geometry-role-letter {
      font-size: 21px;
    }
  
    .geometry-role-key {
      width: min(88vw, 28rem);
      margin-top: 3rem;
  
      grid-template-columns: 1fr;
      align-items: center;
  
      gap: 2.25rem;
    }
  
    .geometry-role-key-item {
      width: 100%;
      gap: .6rem;
    }
  
    .geometry-role-key-visual {
      width: min(100%, 17rem);
      height: 6.5rem;
    }
  
    .geometry-role-key-label {
      font-size: .68rem;
    }
  
  
    /* Steps 05–06 */
  
    .geometry-panel-split {
      min-height: auto;
      padding: 3rem 1.25rem 4rem;
    }
  
    .geometry-split-grid {
      grid-template-columns: 1fr;
      gap: 3rem;
    }
  
    .geometry-split-item {
      width: 100%;
      gap: 1.25rem;
    }
  
    .geometry-kolam-preview {
      width: min(90vw, 34rem);
      height: 36vh;
      min-height: 20rem;
    }
  
  
    /* Step 07 */
  
    .geometry-panel-animation {
      min-height: auto;
      padding: 3rem 1.25rem 4rem;
      gap: 1.25rem;
    }
  
    .geometry-animation-button {
      width: min(88vw, 34rem);
      height: 52vh;
      min-height: 24rem;
    }
  
  
    /* Step 08 */
  
    .geometry-panel-repeat {
      min-height: auto;
      padding: 2.5rem 0 3rem;
    }
  
    .geometry-repeat-field {
      width: calc(100vw - 4rem);
      height: calc(100svh - 9rem);
      min-height: 30rem;
    }
  
    .geometry-panel[data-geometry-step="3"],
    .geometry-panel[data-geometry-step="4"] {
      min-height: auto;
    }
  }
  
  
  /* =========================================================
     NARROW PHONES
     ========================================================= */
  
  @media (max-width: 30rem) {
    .geometry-scroll {
      inset: 4.6rem 0 0 3rem;
    }
  
    .geometry-panel,
    .geometry-panel.is-active {
      min-height: auto;
      padding: 2.5rem 1rem;
      gap: 1rem;
    }
  
    .geometry-caption,
    .geometry-grid-caption,
    .geometry-panel-path .geometry-caption,
    .geometry-panel-shapes > .geometry-caption,
    .geometry-split-item > .geometry-caption {
      width: min(100%, 19rem);
    }
  
  
    /* Step 01 */
  
    .geometry-grid-segmentation {
      width: 90vw;
      height: 50vh;
      min-height: 21rem;
    }
  
  
    /* Step 02 */
  
    .geometry-panel-path .geometry-walk-row {
      width: 84vw;
      height: 48svh;
      min-height: 20rem;
    }
  
  
    /* Step 03 */
  
    .geometry-panel-shapes {
      min-height: auto;
      padding: 2.5rem 1rem 3.5rem;
    }
  
    .geometry-role-walk-row {
      width: 84vw;
      height: 40svh;
      min-height: 18rem;
    }
  
    .geometry-role-key {
      width: 84vw;
      margin-top: 2.5rem;
      gap: 2rem;
    }
  
    .geometry-role-key-visual {
      width: min(100%, 15rem);
      height: 5.75rem;
    }
  
  
    /* Steps 05–06 */
  
    .geometry-panel-split {
      padding: 2.5rem 1rem 3.5rem;
    }
  
    .geometry-split-grid {
      gap: 2.5rem;
    }
  
    .geometry-kolam-preview {
      width: 86vw;
      height: 34vh;
      min-height: 18rem;
    }
  
  
    /* Step 07 */
  
    .geometry-panel-animation {
      padding: 2.5rem 1rem 3.5rem;
    }
  
    .geometry-animation-button {
      width: 84vw;
      height: 46svh;
      min-height: 21rem;
    }
  
  
    /* Step 08 */
  
    .geometry-panel-repeat {
      padding: 2.25rem 0 2.5rem;
    }
  
    .geometry-repeat-field {
      width: calc(100vw - 3.5rem);
      height: 72svh;
      min-height: 28rem;
    }
  }

  /* =========================================================
     ACCESSIBILITY
     ========================================================= */

  @media (prefers-reduced-motion: reduce) {
    .geometry-grid-animated-dot,
    .geometry-rhombus-line,
    .geometry-rhombus-fill,
    .geometry-grid-caption {
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
      stroke-dashoffset: 0 !important;
    }
  }

/* =========================================================
   STEP 01 — OPENING TITLE + RHOMBUS GRID
   ========================================================= */

.geometry-panel-grid {
  justify-content: flex-start;
  gap: clamp(.2rem, .55vh, .45rem);
  padding-top: clamp(2rem, 3vh, 3rem);
  padding-bottom: clamp(.75rem, 1.6vh, 1.25rem);
}

.geometry-panel-grid .geometry-intro-title {
  order: -2;
  width: max-content;
  max-width: calc(100vw - 12rem);
  min-height: 0;

  /* Pushes the 01 line and grid down */
  margin: 0 auto 5rem;

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

  color: var(--cream);
  font-weight: 400;
  line-height: 1;
  text-align: left;
}
.geometry-panel-grid .geometry-title-row {
  display: flex;
  align-items: baseline;
  white-space: nowrap;
}

.geometry-panel-grid .geometry-title-row-top {
  margin-left: 0;
}

.geometry-panel-grid .geometry-title-row-bottom {
  margin-left: 8.8rem;
  margin-top: -1.35rem;
}

.geometry-panel-grid .geometry-title-the,
.geometry-panel-grid .geometry-title-behind {
  position: static;
  display: inline-block;
  font: 300 clamp(.78rem, .95vw, .92rem)/1 var(--mono);
  letter-spacing: .05em;
}

.geometry-panel-grid .geometry-title-the,
.geometry-panel-grid .geometry-title-behind {
  margin-right: .7rem;
}

.geometry-panel-grid .geometry-title-geometry {
  position: static;
  display: inline-block;
  font: 400 clamp(2.9rem, 3.9vw, 3.9rem)/.92 var(--serif);
}

.geometry-panel-grid .geometry-title-kolams {
  position: static;
  display: inline-block;
  white-space: nowrap;
  font: italic 400 clamp(3.3rem, 4.45vw, 4.45rem)/.92 var(--serif);
}

.geometry-panel-grid .geometry-grid-caption,
.geometry-panel-grid .geometry-caption {
  order: -1;
  margin: 0 auto .15rem;
  text-align: center;
}

.geometry-panel-grid .geometry-grid-segmentation {
  order: 0;
  width: min(96rem, 96vw);
  height: min(63vh, 40rem);
  min-height: 0;
}

/* Wide desktop screens */
@media (min-aspect-ratio: 16/9) and (min-width: 1100px) {
  .geometry-panel-grid {
    padding-top: 1.5rem;
  }

  .geometry-panel-grid .geometry-grid-segmentation {
    width: min(94rem, 94vw);
    height: min(57vh, 36rem);
  }
}

/* Tablets and mobile */
@media (max-width: 760px) {
  .geometry-panel-grid {
    padding: 2.5rem 1.25rem 3rem;
    gap: 1rem;
  }

  .geometry-panel-grid .geometry-intro-title {
    width: max-content;
    max-width: 88vw;
    margin-bottom: .35rem;
    align-items: center;
  }

  .geometry-panel-grid .geometry-title-row-bottom {
    margin-left: clamp(3.4rem, 16vw, 5.2rem);
    margin-top: -.7rem;
  }

  .geometry-panel-grid .geometry-title-the,
  .geometry-panel-grid .geometry-title-behind {
    font-size: .72rem;
  }

  .geometry-panel-grid .geometry-title-geometry {
    font-size: clamp(2.5rem, 12vw, 3.3rem);
  }

  .geometry-panel-grid .geometry-title-kolams {
    font-size: clamp(2.8rem, 13vw, 3.7rem);
  }

  .geometry-panel-grid .geometry-grid-caption,
  .geometry-panel-grid .geometry-caption {
    width: min(100%, 22rem);
    margin-bottom: .5rem;
    white-space: normal;
  }

  .geometry-panel-grid .geometry-grid-segmentation {
    width: 92vw;
    height: min(48vh, 25rem);
  }
}

/* Narrow phones */
@media (max-width: 30rem) {
  .geometry-panel-grid {
    padding: 2.25rem 1rem 2.5rem;
  }

  .geometry-panel-grid .geometry-intro-title {
    max-width: 90vw;
  }

  .geometry-panel-grid .geometry-title-row-bottom {
    margin-left: 3.2rem;
    margin-top: -.55rem;
  }

  .geometry-panel-grid .geometry-title-geometry {
    font-size: clamp(2.2rem, 12vw, 2.9rem);
  }

  .geometry-panel-grid .geometry-title-kolams {
    font-size: clamp(2.5rem, 13vw, 3.2rem);
  }

  .geometry-panel-grid .geometry-grid-segmentation {
    width: 90vw;
    height: min(46vh, 22rem);
  }
}
/* Phone: Steps 04 and 05 behave as two distinct scroll-triggered blocks. */
@media (max-width: 30rem) and (orientation: portrait) {
  .geometry-panel-split {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

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

  .geometry-split-item {
    min-height: calc(100svh - 4.6rem) !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.4rem !important;
    padding: 2.25rem 1rem 3rem !important;
    box-sizing: border-box !important;
  }

  .geometry-split-item + .geometry-split-item {
    margin-top: 0 !important;
  }

  .geometry-split-item .geometry-kolam-preview {
    flex: 0 0 auto !important;
    width: 84vw !important;
    height: min(48svh, 25rem) !important;
    min-height: 19rem !important;
  }
}