/*
 * v1.5 Mobile M2 — Homepage second half.
 *
 * Phone-only recomposition for AI / Twin Orbit, Perspectives, Formation,
 * Beyond Work, and Contact. M1, the 621–900 tablet band, and Desktop remain
 * outside this stylesheet.
 */

@media (max-width: 620px) {
  /* AI framing: retain the thesis while removing desktop-scale dead space. */
  .current-locked-ai .integration-layout {
    gap: 2.5rem;
    padding-block: 3.25rem 3.5rem;
  }

  .current-locked-ai .integration-copy .section-marker {
    font-size: .7rem;
  }

  .current-locked-ai .integration-copy h2 {
    max-width: 11ch;
    margin-top: 1.35rem;
    font-size: clamp(2.75rem, 11.75vw, 3.2rem);
    line-height: .93;
  }

  .current-locked-ai .ai-workflow-thesis {
    max-width: 31rem;
    margin-top: 1.5rem;
    padding-top: .9rem;
    font-size: .96rem;
    line-height: 1.48;
  }

  .current-locked-ai .integration-map {
    margin-top: 0;
  }

  .current-locked-ai .integration-meta {
    display: block;
    padding-bottom: .8rem;
    font-size: .72rem;
    line-height: 1.35;
  }

  /*
   * Twin Orbit: DOM order is the visual order. The two-up grid flows as
   * Asset → AI/Risk → Routing/Human → Learning, without CSS order.
   */
  .current-locked-ai .integration-artifact {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem .75rem;
    min-height: 0;
    margin-top: 1.25rem;
    isolation: isolate;
  }

  .current-locked-ai .integration-artifact .twin-geometry {
    display: none;
  }

  .current-locked-ai .integration-artifact > .asset-core,
  .current-locked-ai .integration-artifact > .orbit-copy,
  .current-locked-ai .integration-artifact > .edge-rail,
  .current-locked-ai .integration-artifact > .learning-field {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    margin: 0;
    transform: none;
    order: initial;
    grid-row: auto;
  }

  .current-locked-ai .integration-artifact > .asset-core,
  .current-locked-ai .integration-artifact > .learning-field {
    grid-column: 1 / -1;
  }

  .current-locked-ai .integration-artifact > .orbit-copy,
  .current-locked-ai .integration-artifact > .edge-rail {
    grid-column: auto;
    min-height: 9.6rem;
    padding: 1rem .75rem;
    border: 0;
    border-top: 1px solid var(--twin-rule-soft);
    background: transparent;
    text-align: left;
    opacity: 1;
  }

  .current-locked-ai .integration-artifact > .asset-core {
    padding: 1.15rem 1rem 1rem;
    border-block: 1px solid var(--twin-rule-soft);
    background: transparent;
  }

  .current-locked-ai .asset-core .system-center-wrapper {
    left: auto;
    width: auto;
    transform: none;
  }

  .current-locked-ai .asset-core h2 {
    margin-bottom: .85rem;
    font-size: 1.75rem;
    line-height: .9;
  }

  .current-locked-ai .asset-core ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 .75rem;
  }

  .current-locked-ai .asset-core li {
    padding-block: .45rem;
    font-size: .84rem;
    line-height: 1.25;
  }

  .current-locked-ai .orbit-copy h2,
  .current-locked-ai .edge-rail h2,
  .current-locked-ai .learning-field h2 {
    min-height: 2.35rem;
    padding: 0 0 .7rem;
    border-bottom: 1px solid var(--twin-rule-faint);
    color: var(--twin-ivory);
    font-size: .72rem;
    letter-spacing: .1em;
    line-height: 1.3;
    text-align: left;
  }

  .current-locked-ai .orbit-copy h2::after {
    display: none;
  }

  .current-locked-ai .orbit-copy ul,
  .current-locked-ai .edge-rail ul {
    gap: .45rem;
    margin-top: .8rem;
  }

  .current-locked-ai .orbit-copy li,
  .current-locked-ai .edge-rail li {
    color: var(--twin-stone);
    font-size: .86rem;
    line-height: 1.28;
  }

  .current-locked-ai .integration-artifact > .learning-field {
    display: block;
    padding: 1rem .85rem 1.05rem;
    border-block: 1px solid var(--twin-rule-soft);
    background: transparent;
  }

  .current-locked-ai .learning-field h2 {
    min-height: 0;
    text-align: left;
  }

  .current-locked-ai .learning-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: .8rem;
  }

  .current-locked-ai .learning-items span {
    padding-inline: .6rem;
    font-size: .78rem;
    line-height: 1.25;
    text-align: center;
  }

  .current-locked-ai .learning-items span:first-child {
    padding-left: 0;
  }

  .current-locked-ai .learning-items span:last-child {
    padding-right: 0;
  }

  /* Stage connectors are decorative CSS geometry, not reading content. */
  .current-locked-ai .integration-artifact > .asset-core::after,
  .current-locked-ai .integration-artifact > .rail-ai::after,
  .current-locked-ai .integration-artifact > .orbit-routing::after {
    position: absolute;
    z-index: 3;
    bottom: -.8rem;
    width: .5rem;
    height: .65rem;
    background: var(--twin-rule);
    clip-path: polygon(44% 0, 56% 0, 56% 58%, 100% 58%, 50% 100%, 0 58%, 44% 58%);
    content: "";
    pointer-events: none;
  }

  .current-locked-ai .integration-artifact > .asset-core::after {
    left: calc(50% - .25rem);
  }

  /* One cue in each column gutter signals paired-stage → paired-stage. */
  .current-locked-ai .integration-artifact > .rail-ai::after,
  .current-locked-ai .integration-artifact > .orbit-routing::after {
    left: calc(100% + .125rem);
  }

  /* Learning feeds a dashed return path that terminates back at the asset. */
  .current-locked-ai .integration-artifact > .learning-field::after {
    position: absolute;
    z-index: 2;
    bottom: -.65rem;
    left: 50%;
    height: .65rem;
    border-left: 1px dashed rgba(247, 243, 234, .38);
    content: "";
    pointer-events: none;
  }

  .current-locked-ai .integration-artifact::before {
    position: absolute;
    z-index: 0;
    top: 5.1rem;
    right: -.45rem;
    bottom: -.65rem;
    left: 50%;
    border: 1px dashed rgba(247, 243, 234, .32);
    border-left: 0;
    border-radius: 0 .7rem .7rem 0;
    content: "";
    pointer-events: none;
  }

  .current-locked-ai .integration-artifact::after {
    position: absolute;
    z-index: 2;
    top: 4.85rem;
    left: calc(50% - .46rem);
    width: 0;
    height: 0;
    border-top: .28rem solid transparent;
    border-right: .46rem solid rgba(247, 243, 234, .48);
    border-bottom: .28rem solid transparent;
    content: "";
    pointer-events: none;
  }

  /* Perspectives: preserve editorial rhythm at a phone-native reading cost. */
  #perspectives {
    padding-block: 4rem;
  }

  #perspectives .perspective-intro {
    gap: 1.15rem;
    margin-bottom: 2.5rem;
  }

  #perspectives .perspective-intro h2 {
    font-size: clamp(2.8rem, 12vw, 3.1rem);
  }

  #perspectives .perspective-intro > p {
    font-size: .94rem;
    line-height: 1.52;
  }

  #perspectives .perspective-list li {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: .75rem;
    padding-block: 1.75rem;
  }

  #perspectives .perspective-number {
    padding-top: .42rem;
  }

  #perspectives .perspective-list p {
    max-width: 28ch;
    font-size: clamp(1.65rem, 7.1vw, 1.85rem);
    line-height: 1.06;
  }

  /* Formation: an equal-window diptych replaces the long image stack. */
  #about {
    padding-block: 4.5rem 5.5rem;
  }

  #about .about-formation-intro {
    gap: 2rem;
  }

  #about .about-formation-heading h2 {
    max-width: 14ch;
    margin-top: 1.35rem;
    font-size: clamp(2.55rem, 11vw, 3rem);
    line-height: .94;
  }

  #about .about-copy {
    font-size: .94rem;
    line-height: 1.52;
  }

  #about .about-copy p {
    margin-bottom: 1rem;
  }

  #about .about-copy p:last-child {
    margin-bottom: 0;
  }

  #about .formation-diptych {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .8rem;
    align-items: start;
    margin-top: 2.25rem;
  }

  #about .formation-diptych figure {
    grid-template-rows: auto auto;
    height: auto;
  }

  #about .formation-image-frame {
    aspect-ratio: 1.65 / 1;
  }

  #about .formation-diptych figcaption {
    display: grid;
    gap: .3rem;
    min-height: 3.8125rem;
    align-content: start;
    padding-top: .6rem;
    font-size: .625rem;
    letter-spacing: .1em;
    line-height: 1.35;
  }

  #about .formation-diptych figcaption span:last-child {
    text-align: left;
  }

  /* Beyond: one recognisable shared moment, without the desktop duplicate. */
  #beyond {
    padding-block: 4rem 4.25rem;
  }

  #beyond .beyond-work-intro {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  #beyond .beyond-work-intro h2 {
    margin-top: 1.35rem;
    font-size: clamp(2.85rem, 12vw, 3.2rem);
  }

  #beyond .beyond-work-intro > p {
    max-width: 18ch;
    font-size: clamp(1.9rem, 8.2vw, 2.2rem);
    line-height: 1.06;
  }

  #beyond .sheltie-spread {
    display: block;
    margin-top: 2rem;
  }

  #beyond .sheltie-dominant {
    width: 100%;
  }

  #beyond .sheltie-supporting {
    display: none;
  }

  #beyond .sheltie-image-frame {
    aspect-ratio: 1.7 / 1;
  }

  #beyond .sheltie-image-frame img {
    object-position: 50% 58%;
  }

  /* Contact: concise hierarchy with an explicit 44px email target. */
  #contact .contact-grid {
    gap: 1.5rem;
    padding-block: 3.5rem 2.75rem;
  }

  #contact .contact-grid h2 {
    margin-top: 1rem;
    font-size: clamp(2.65rem, 11.5vw, 3rem);
    line-height: .94;
  }

  #contact .contact-item {
    padding-top: .7rem;
  }

  #contact .contact-item span {
    margin-bottom: .2rem;
  }

  #contact .contact-item p {
    font-size: 1.05rem;
  }

  #contact .contact-item a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
  }

  #contact .legal {
    padding-block: 1rem;
  }
}

@media (max-width: 340px) {
  .current-locked-ai .integration-artifact {
    gap: .9rem .5rem;
  }

  .current-locked-ai .integration-artifact > .rail-ai::after,
  .current-locked-ai .integration-artifact > .orbit-routing::after {
    left: 100%;
  }

  .current-locked-ai .integration-artifact > .orbit-copy,
  .current-locked-ai .integration-artifact > .edge-rail {
    padding-inline: .6rem;
  }

  #about .formation-diptych {
    gap: .65rem;
  }
}