/* Mobile architecture stability correction — 2026-08-03
   Keeps the full locked copy inside the detail card, preserves the scroll animation,
   and uses the available mobile width without forcing the whole composition beyond the viewport. */
@media (max-width:760px){
  .arch-sticky>.container{
    width:calc(100% - 12px)!important;
    max-width:680px!important;
    margin-inline:auto!important;
    padding:0!important;
  }

  .arch-sticky .section-head{
    width:100%;
    margin-bottom:8px!important;
    padding-inline:6px!important;
  }

  .arch-sticky .section-head h2{
    font-size:clamp(1.45rem,6.9vw,1.95rem)!important;
    line-height:1.06!important;
    text-wrap:balance;
  }

  .arch-sticky .section-head .lede{
    margin-top:7px!important;
    font-size:.66rem!important;
    line-height:1.35!important;
  }

  .arch-stage{
    width:100%!important;
    max-width:none!important;
    padding:12px 8px 10px!important;
    border-radius:19px!important;
    overflow:hidden!important;
  }

  /* The old fixed max-height let the paragraph paint outside the card.
     Give the detail card a controlled viewport and make only its paragraph scroll. */
  .arch-section .arch-detail{
    display:block!important;
    width:100%!important;
    height:clamp(190px,25svh,230px)!important;
    min-height:190px!important;
    max-height:230px!important;
    margin:0 0 8px!important;
    padding:14px 14px 12px!important;
    border-radius:15px!important;
    overflow:hidden!important;
  }

  .arch-section .arch-detail>div:last-child{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .arch-section .step-copy.active{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
  }

  .arch-section .arch-detail h3{
    flex:0 0 auto;
    margin:0 0 8px!important;
    padding-right:10px;
    font-size:clamp(1.06rem,5vw,1.32rem)!important;
    line-height:1.13!important;
    text-wrap:balance;
  }

  .arch-section .arch-detail p{
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 11px 5px 0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
    font-size:clamp(.72rem,3.1vw,.84rem)!important;
    line-height:1.4!important;
    overflow-wrap:anywhere;
  }

  .arch-section .flow-zone{
    height:clamp(286px,42svh,370px)!important;
    min-height:286px!important;
    max-height:370px!important;
  }

  .arch-section .flow-row{
    inset:4px 24px!important;
    left:24px!important;
    right:24px!important;
    top:4px!important;
    bottom:4px!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .arch-section .flow-node{
    min-height:0!important;
    padding:7px 11px!important;
    border-radius:14px!important;
    gap:10px!important;
  }

  .arch-section .flow-node svg{
    width:20px!important;
    height:20px!important;
    flex:0 0 20px;
  }

  .arch-section .flow-node span{
    min-width:0;
    font-size:clamp(6.8px,2.1vw,8px)!important;
    line-height:1.22!important;
    letter-spacing:.06em!important;
    overflow-wrap:anywhere;
  }
}

@media (max-width:430px){
  .arch-sticky>.container{width:calc(100% - 8px)!important}
  .arch-sticky .section-head{padding-inline:4px!important}
  .arch-stage{padding-inline:6px!important}
  .arch-section .arch-detail{
    height:clamp(185px,24svh,215px)!important;
    min-height:185px!important;
    max-height:215px!important;
    padding:12px 12px 10px!important;
  }
  .arch-section .arch-detail h3{font-size:clamp(1rem,5.4vw,1.22rem)!important}
  .arch-section .arch-detail p{font-size:clamp(.68rem,3.25vw,.78rem)!important}
  .arch-section .flow-row{left:20px!important;right:20px!important}
}

@media (max-width:760px) and (max-height:720px){
  .arch-sticky .section-head h2{font-size:1.4rem!important}
  .arch-sticky .section-head .lede{display:none!important}
  .arch-section .arch-detail{
    height:165px!important;
    min-height:165px!important;
    max-height:165px!important;
  }
  .arch-section .arch-detail h3{font-size:1rem!important;margin-bottom:6px!important}
  .arch-section .arch-detail p{font-size:.67rem!important;line-height:1.32!important}
  .arch-section .flow-zone{
    height:280px!important;
    min-height:280px!important;
    max-height:280px!important;
  }
}